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>