Weird DIV problem

paulbrooks · #1 (**permalink**) 06-15-04, 11:52

Hi,

I'm trying to display database results in a HTML table within a DIV box, which is displayed inline within a table cell.

If I put just four or five rows of results in the table, it is fine and the DIV displays a scrollbar if necessary.

However, if I display more than that, a mystery gap appears above the DIV and it moves further down the page for each row I add.

Any ideas why this is happening?

Paul

MrWizard · #2 (**permalink**) 06-15-04, 21:46

How about posting some code, so we can see what you're doing!

paulbrooks · #3 (**permalink**) 06-16-04, 05:36

Here is a shortened version of the HTML around the DIV:

Code:

<td valign="top"><div style="border:1px solid red; width:90%; height:180; overflow:auto" valign="top">
<table width="100%" border="1" align="center" cellpadding="0" cellspacing="0">
<tr>
<td class="panelText" style="padding-top:8px"><b>Title</b></td></tr>
</table>
</div></td>

This example only has one row in the table and will display fine, but once I have 10 or more rows, it causes a problem.

The browser displays it with a gap between the top of the TD cell and the top of the red border. If I drag my mouse across the page to highlight the DIV, it actually covers the whole of the cell, but the border and contents start further down.