Space beneath an overflow element

[klanga2049]

I have a div with the overflow attibute set to auto. Inside this div I have a table with some radio buttons and text. When I load the page, I see the div with the scrollbar, but there is a bunch of space below this div proportional to how many rows I have in the table. How do I make this extra space go away?

[klanga2049]

bump

[klanga2049]

Here is the code that is causing the problem. I've noticed that if I remove the display:table, table-row, table-cell divs, then the whitespace goes away. This is affecting both Mozilla Firefox and Opera, but not Internet Explorer. Any ideas?


<div style="display:table;padding: 5px;width: 80%; border: solid 1px #00ff00;">
<div style="display:table-row;">
<div style="display:table-cell; width: 70%; text-align:left;">
<div align="left"style="height:60px;border:solid 3px;border-color:rgb(131, 133, 131) rgb(255, 255, 255) rgb(255, 255, 255) rgb(131, 133, 131); width: 175px;text-a
lign: left; overflow: auto; border: solid 1px #ff0000; ">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
&nbsp;<font >x</font>
</td>

<td>
&nbsp;&nbsp;&nbsp;<font >+</font>
</td>
<td>
&nbsp;&nbsp;<font >-</font><br />
</td>
<td>
&nbsp;

</td>
</tr>
<tr>
<td>
<input type="radio" name="refine:16" value="-1" checked="true"/> </td>
<td>
<input type="radio" name="refine:16" value="1"/> </td>
<td>

<input type="radio" name="refine:16" value="2"/> </td>
<td>
<font >&nbsp;Automotive</font><br />
</td>
</tr>
<tr>
<td>
<input type="radio" name="refine:21" value="-1" checked="true"/> </td>

<td>
<input type="radio" name="refine:21" value="1"/> </td>
<td>
<input type="radio" name="refine:21" value="2"/> </td>
<td>
<font >&nbsp;Beer</font><br />
</td>

</tr>
<tr>
<td>
<input type="radio" name="refine:6" value="-1" checked="true"/> </td>
<td>
<input type="radio" name="refine:6" value="1"/> </td>
<td>
<input type="radio" name="refine:6" value="2"/> </td>

<td>
<font >&nbsp;Clothing</font><br />
</td>
</tr>
<tr>
<td>
<input type="radio" name="refine:5" value="-1" checked="true"/> </td>
<td>

<input type="radio" name="refine:5" value="1"/> </td>
<td>
<input type="radio" name="refine:5" value="2"/> </td>
<td>
<font >&nbsp;Convenience</font><br />
</td>
</tr>

<tr>
<td>
<input type="radio" name="refine:18" value="-1" checked="true"/> </td>
<td>
<input type="radio" name="refine:18" value="1"/> </td>
<td>
<input type="radio" name="refine:18" value="2"/> </td>

<td>
<font >&nbsp;Distribution Center</font><br />
</td>
</tr>
<tr>
<td>
<input type="radio" name="refine:15" value="-1" checked="true"/> </td>
<td>

<input type="radio" name="refine:15" value="1"/> </td>
<td>
<input type="radio" name="refine:15" value="2"/> </td>
<td>
<font >&nbsp;Fabric/Craft</font><br />
</td>
</tr>

<tr>
<td>
<input type="radio" name="refine:3" value="-1" checked="true"/> </td>
<td>
<input type="radio" name="refine:3" value="1"/> </td>
<td>
<input type="radio" name="refine:3" value="2"/> </td>


<td>
<font >&nbsp;Gas Bar</font><br />
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
hello again