Why does border style add extra space?
I have a table that is 900 pixels wide. It is surrounded by a <div> wherein I specify a class for the border. The border is outlining an area that is 974 pixels wide ... not 900. Why? Here's the relevant code:
In style sheet:
.outborder{border:1px solid #FFCC99;}
In web page:
<body>
<div class="outborder">
<table width="900" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr>
<td width="15"> </td>
<td width="270"> </td>
<td width="15"> </td>
<td width="270"> </td>
<td width="15"> </td>
<td width="300"><img src="/_omc/images/voodo.jp
</tr>
</table>
</div>
</body>
In style sheet:
.outborder{border:1px solid #FFCC99;}
In web page:
<body>
<div class="outborder">
<table width="900" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr>
<td width="15"> </td>
<td width="270"> </td>
<td width="15"> </td>
<td width="270"> </td>
<td width="15"> </td>
<td width="300"><img src="/_omc/images/voodo.jp
</tr>
</table>
</div>
</body>
ASKER
I was basically following an example; didn't know I could put it in the table. I thought that would cause vertical borders on all the columns too, but it doesn't. So is putting in the table the "better" way to do it?
Thanks.
Thanks.
Also, keep in mind that the border itself is 1 pixel wide at each end, so if you add a border to something that is 900px wide, it'll total 902px. At least, that's the expected behavior.
ASKER
Actually, adding padding and margin to the style sheet doesn't fix the problem. Putting the class inside the table instead of div tag does fix the problem. Any idea why?
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
But how do you give it a width? "Width" isn't an attribute for the DIV tag? And if I add width=900; to my class definition, it makes no difference; border still displays too wide.
<div style="width:900px">
or
class {
width:900px;
}
in your stylesheet
or
class {
width:900px;
}
in your stylesheet
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
OK, that does it. Final solution:
In CSS:
.outborder{border:1px solid #FFCC99;
width:900px;}
Code in web page same as in my original post.
Thanks!
In CSS:
.outborder{border:1px solid #FFCC99;
width:900px;}
Code in web page same as in my original post.
Thanks!
add * {padding:0;margin:0;} to your stylesheet.
Why do you need the border on the div? Why not have the border on the table and remove the div?
Cheers
Steggs