/    Sign up×
Community /Pin to ProfileBookmark

FF and IE render different heights for nested table/divs

Copy linkTweet thisAlerts:
Mar 09.2010

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>[/CODE]

to post a comment
CSS

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@skullsnestMar 09.2010 — the div might have overflow hidden, but it's height is set to 100&#37;. seeing as the content of the subdiv is 2000px, the 100% is equal to the 2000px;
Copy linkTweet thisAlerts:
@mrmuffinauthorMar 10.2010 — According to w3schools.com a percentage height "Defines the height in percent of the [I]containing block[/I]", 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.
Copy linkTweet thisAlerts:
@skullsnestMar 11.2010 — set the div that has a style of

height: 600px;

to height: 600px; overflow: hidden

this should do the trick
Copy linkTweet thisAlerts:
@mrmuffinauthorMar 15.2010 — Thank you for your suggestions skullsnest. That [I]does[/I] 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.
Copy linkTweet thisAlerts:
@tirnaMar 15.2010 — 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..?
×

Success!

Help @mrmuffin spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 4.29,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...