FF and IE render different heights for nested table/divs

**mrmuffin** · 03-09-2010 09:48 AM

Can someone explain why this code renders as as a 600px high block in IE8, but as a 2000px high block in FF (and Chrome)? Personally I would expect the IE behaviour, but I'm no expert on standards. My reasoning here is that the innermost div should not affect the height of anything, since its parent has "overflow:hidden".

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" >
<head><title>Untitled Page</title>
<style type="text/css">
* { margin: 0; padding:0; }
html, body, table, tr, td { width:100%; height:100%;}
</style>
</head>
<body>
    <div style="height:600px;">
    <table cellpadding="0" cellspacing="0">
    <tr>
		<td>
		<div style="overflow:hidden;height:100%;background-color:red;width:300px;">
			<div id="testdiv" style="background-color:blue;width:200px;height:2000px;overflow:auto;">
			TEST!
			</div>
		</div>
		</td>
	</tr>
    </table>
    </div>
</body>
</html>

**skullsnest** · 03-09-2010 01:06 PM

the div might have overflow hidden, but it's height is set to 100%. seeing as the content of the subdiv is 2000px, the 100% is equal to the 2000px;

**mrmuffin** · 03-10-2010 01:36 AM

According to w3schools.com a percentage height "Defines the height in percent of the containing block", not its content. But i guess that the content affects the size of the table, which then of course affects the size of the container. But should the table really behave like this?

Unfortunately I'm stuck with the table, as it is generated from a third party Asp.Net component. But if there was any way of making FF behave like IE in this matter, I'd really like to know.

**skullsnest** · 03-10-2010 11:05 PM

set the div that has a style of
height: 600px;
to height: 600px; overflow: hidden

this should do the trick

**mrmuffin** · 03-15-2010 04:23 AM

Thank you for your suggestions skullsnest. That does make it appear to have the correct height. However, it really only hides the problem. The table is still 2000px high in FF, only clipped to 600px. If I, for instance, set testdiv's height to 100% its content will be scrollable in IE, but clipped in FF.

**tirna** · 03-15-2010 05:47 AM

The table model is a beast unto itself.

If you want to adjust the height of divs, p's etc in td's I think you'll find it will work better if you set width and height styles to the td's containing the content and not the content itself.

Then you might run into the problem of browser incompatibility which appears you might have here.

My recommendation, for what it's worth - steer away from tables as a layout tool, especially nested tables and stick to using css for layout and styling your pages....but that's just me..

Thread: FF and IE render different heights for nested table/divs

Thread Tools

Display

FF and IE render different heights for nested table/divs

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions