Topic: Border around DIV when DIV is inside a cell Pages that link to <a href="https://ozoneasylum.com/backlink?for=24904" title="Pages that link to Topic: Border around DIV when DIV is inside a cell" rel="nofollow" >Topic: Border around DIV when DIV is inside a cell\

 
Author Thread
viol
Maniac (V) Inmate

From: Lago Paranoá
Insane since: May 2002

IP logged posted posted 02-03-2005 21:35 Edit Quote

How can I get rid of the "border" when I use a DIV inside a cell table, like in the example below?

code:
<HTML>
<HEAD>
<TITLE>DIV in a Cell &quot;Border&quot; Problem</TITLE>
</HEAD>

<BODY>

<table style="background-color:#f0f;
border-collapse:collapse;
margin:0;
padding:0;">
<tr>
<td>
<div style="width:200px;
height:100px;
background-color:#ff0;
margin:0;
padding:0;">

How can I get rid of this 1 pixel
magenta border around the DIV and
see only the yellow color, I mean,
how to make the DIV take all the
cell space?
</div>
</td>
</tr>
</table>

</BODY>
</HTML>



TIA.

DL-44
Maniac (V) Inmate

From: under the bed
Insane since: Feb 2000

IP logged posted posted 02-03-2005 22:40 Edit Quote

the border is not part of the cell space, so any element inside the cell will never take up the border space - it doesn't work that way.

You'll need to specify a class for the cell that has no border most likely. Not clear on what it is you're trying to do though...

Seems like you may be trying to hack away at something that you can't get to work without a table?

Nathus
Bipolar (III) Inmate

From: Minnesota
Insane since: Aug 2003

IP logged posted posted 02-03-2005 22:51 Edit Quote

You need to set the padding of the table cell to 0

by specifying the padding using css in the table tag you are only affecting the tables "box" it doesn't set the properties of the cells like if you were using the padding attribute.

For example

code:
<HTML>
<HEAD>
<TITLE>DIV in a Cell &quot;Border&quot; Problem</TITLE>
</HEAD>
<BODY>

<table style="background-color:#f0f;
border-collapse:collapse;
margin:0;
padding:0;">
<tr>
<td style="padding:0;">
<div style="width:200px;
height:100px;
background-color:#ff0;
margin:0;
padding:0;">

How can I get rid of this 1 pixel
magenta border around the DIV and
see only the yellow color, I mean,
how to make the DIV take all the
cell space?
</div>
</td>
</tr>
</table>

</BODY>
</HTML>



(Edited by Nathus on 02-03-2005 22:51)

viol
Maniac (V) Inmate

From: Lago Paranoá
Insane since: May 2002

IP logged posted posted 02-03-2005 23:13 Edit Quote

Thanks, Nathus, that really solved the problem.

DL-44, yes, you are right. I am trying to make a tableless design, this one:
http://www.viol.com/temp/index.htm

that I mention in this recent post:
http://www.ozoneasylum.com/24902

I need the navigation DIV to go down all the way, up to the footer area, just as the Contents DIV goes (because the latter is fluid).

I think that I can do that only by using javascript. The code would read the contents DIV height and would apply it to the navigation DIV height, when loading or resizing the window.

Another possibility that I am working on is to use a good and old table to force the structure and then use DIV's inside the table cells. My first problem was to solve the border problem, that Nathus has just solved.

But I still have a big problem to solve, that is to make a DIV take the entire space of a cell, regardless of the height of the DIV (that should not be fixed), when the table is resized.

I think that the javascript solution should be the best one.

DL-44
Maniac (V) Inmate

From: under the bed
Insane since: Feb 2000

IP logged posted posted 02-04-2005 03:12 Edit Quote

That's always a tricky thing.

I don't have specific links at the moment, but go check out the CSS forum at the GN - there are a couple of guys there who have posted some really great solutions to a variety of problems, and I know this has come up there.

Can't really be of more concrete help at the moment, but it's definately worth the time to read through some threads over there.

viol
Maniac (V) Inmate

From: Lago Paranoá
Insane since: May 2002

IP logged posted posted 02-04-2005 03:59 Edit Quote

Well, after some more hours of Google'ing and reading and experimenting, I may say that there is nothing that four lines of javascript can't cure.

I am going for the DIV layout. Here is the final raw structure (the colors are just for clues). It's very clean now.

http://www.viol.com/temp/index_oval.htm

and it's working in IE6sp2, Opera 754, Netscape 7.2, Mozila 175 and Firefox 1.0, so, it's good enough for me.

Thanks guys.

DL-44
Maniac (V) Inmate

From: under the bed
Insane since: Feb 2000

IP logged posted posted 02-04-2005 14:05 Edit Quote

nifty little javascript.

didn't know it was so easy =)

viol
Maniac (V) Inmate

From: Lago Paranoá
Insane since: May 2002

IP logged posted posted 02-05-2005 01:10 Edit Quote

I didn't know either. Found a site in Internet and modified the code to my needs.

Here's a new version, now taking the shape I wanted. It's still under development. Don't try to change font size. The corners are generated on-the-fly using Hard Grok's script.

http://www.viol.com/temp/oval.php

EDIT: link changed

(Edited by viol on 02-05-2005 01:43)



Post Reply
 
Your User Name:
Your Password:
Login Options:
 
Your Text:
Loading...
Options:


« BackwardsOnwards »

Show Forum Drop Down Menu