Div in Table Cell extra space

[MattB]

Hello please help,

I have a table cell with a div in it. The div has a width of 300px.
but when it is rendered it puts extra space into the table cell.

Here's the style

<style>
#treecontainer
{
HEIGHT: 100%;
BACKGROUND: #ffffff;
overflow: hidden;
BORDER-TOP: 1px solid;
BORDER-BOTTOM: 1px solid;
BORDER-LEFT: 2px solid;
BORDER-RIGHT: 2px solid;
WIDTH: 230px;
DISPLAY: inline;
position: static;
}
</style>

and here is the HTML fragment...

<table border="1" cellspacing="0" cellpadding="0"
style="width:250px;">
<tr height="10">
<td></td>
<td><img src="./images/top-lf-lb.gif" border="0" /></td>
<td width="100%" background="./images/top-repeat-strip-lb.gif"></td>
<td><img src="./images/top-rt-lb.gif" border="0" /></td>
</tr>
<tr>
<td></td>
<td colspan="3" style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px;
PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px">
<div id="treecontainer" style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px;
PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px">
</div>
</td>
</tr>
<tr height="10" id="r3">
<td width="3" valign="top">
</td>
<td><img src="./images/bottom-lf-lb.gif" border="0"></td>
<td width="100%" background="./images/bottom-repeat-strip-lb.gif">
<img src="./images/sp.gif" border="0"></td>
<td><img src="./images/bottom-rt-lb.gif" border="0"></td>
</tr>
</table>

[Steve Pugh]

MB*********@yahoo.co.uk (MattB) wrote:

I have a table cell with a div in it. The div has a width of 300px.
Your CSS says 230px not 300px.
but when it is rendered it puts extra space into the table cell.
It's impossible to tell from the code you've posted below. Other
factors such as the doctype, the widths of the images used, and the
content within the div may all play a part. Post a URL.
<style>
Missing type attribute.
#treecontainer
{
HEIGHT: 100%;
BACKGROUND: #ffffff;
overflow: hidden;
BORDER-TOP: 1px solid;
BORDER-BOTTOM: 1px solid;
BORDER-LEFT: 2px solid;
BORDER-RIGHT: 2px solid;
WIDTH: 230px;
DISPLAY: inline;
You can't set widths on inline elments. So the width should be ignored
altogether.
position: static;
This is the default. Unless you have something like
div {position: relative;} elsewhere in your stylesheet this is totally
usless.
}
</style>

and here is the HTML fragment...

<table border="1" cellspacing="0" cellpadding="0"
style="width:250px;">
So the table should be 250px wide.
<tr height="10">
No such attribute as height for tr.
<td></td>
<td><img src="./images/top-lf-lb.gif" border="0" /></td>
Missing the required alt attribute here and on every image in your
sample.
<td width="100%" background="./images/top-repeat-strip-lb.gif"></td>
<td><img src="./images/top-rt-lb.gif" border="0" /></td>
</tr>
<tr>
<td></td>
<td colspan="3" style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px;
PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px">
Wouldn't style="padding: 0;" be a lot less typing?
<div id="treecontainer" style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px;
PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px">

Again, style="padding: 0;", and why not put this in the #treecontainer
style?

Make sure your code validates, then post a URL and we may be able to
find your problem.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <st***@pugh.net> <http://steve.pugh.net/>