FF and IE render different heights for nested table/divs
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".
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.
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.