100% height on nested table cell in IE

Question

I want a nested table to expand to the height of the enclosing cell. This works as expected in Firefox/Chrome/Safari, but not in IE7 or IE8. Please see the example here:

http://www.bitmechanic.com/heightDemo.html

The DOCTYPE is relevant. While the demo above validates as HTML 4.01 Strict, it does not render properly in IE7. If I remove the DOCTYPE entirely, or set it to HTML 3.2, it renders properly in IE.

Any suggestions on how to get this to render in 4.01 (strict or loose)? The actual web site is a bit more complicated -- changing the DOCTYPE will cause all sorts of other problems.

We're struggling to understand the (presumed) IE bug here and how to work around it.

thanks

-- James

Answer 1

Not much you can do it's IE that is still mis-beahving also in version 7 and 8. Read thsi ansewer: http://stackoverflow.com/questions/197266/table-layout-wrong-in-ie7/197317#197317

You have only two solusions:

1. either you remove the DOCTYPE for that page with the risk to get into many other displaying issues,

2. or you have to use Javascript to get the height of the table and you enforce the cells height in px to the same height of the table.