I found the problem. The table was nested inside a FORM, thus, the height of the table was set to 100% of the form element instead of the body element.
CSS specifies that a percent (%) height value causes the element to have a height value equal to the indicated % of the parent element. Since the FORM element has no height, the TABLE was being set to a height of 100% of [no height value], or 0 pixels -- and was naturally resized as content was added, rather than being set to 100% of the BODY element.
Internet Explorer must automatically assume that either the absolute height of the HTML or BODY element (I'm not sure which) is the pixel height of the whole document, and ignores any elements that cannot have a height value, like a FORM, in the height-inheritance hierarchy.
To me, Internet Explorer's method makes a lot more sense and is much easier to work with than the way CSS has specified it. I hope they consider changing that at some point.
To illustrate:
The first example below works in IE, Mozilla, and Opera as expected (note the lack of <style>html,body {height: 100%}</style>. The second example works in IE, but not in Opera -- the table is set to 100% of the height of the FORM, not the BODY. (For some reason the second example actually works in Firefox, which is odd since your own example, with the form tags added, behaves the same as Opera).
Example 1:
Code:
<html>
<body>
<table style="height: 100%; width: 100%; border-style: solid; border-color: black; border-width: 2px">
<tr>
<td style="width: 20%; background-color: #d0d0f4">
1
</td>
<td style="width: 80%; background-color: white">
2
</td>
</tr>
</table>
</body>
</html>
Example 2:
Code:
<html>
<body>
<form>
<table style="height: 100%; width: 100%; border-style: solid; border-color: black; border-width: 2px">
<tr>
<td style="width: 20%; background-color: #d0d0f4">
1
</td>
<td style="width: 80%; background-color: white">
2
</td>
</tr>
</table>
</form>
</body>
</html>
Originally Posted by irbrian
Bookmarks