tables with height="100%" with style="table-layout:fixed" in strict mode
I am testing html/css in IE 7 rc1 and The following table is exibiting buggy(unexpected) behavior while in strict mode. It lays out correctly in ie quirks and firefox strict. Despite the whole push for standards compliance on the web, there are still situations where I need to resort to full height liquid layouts using tables.
Within the standards, there is no way to achieve full height complex multipane layouts without resorting to liquid (scaleable) table layouts. So, before I get flamed for using tables improperly and discriminating against the blind, please consider this a plea for help. PLEASE!!!!!! Show me what I am doing wrong that makes this simple html sample deviate from the "Standard".
If I can't find a solution to this problem, I will be stuck in quirks mode forever....
As a side note, I have absolutely LOVED developing web apps in IE for many years and appreciate the pragmatic approach you have followed in the past. Keep up the good work!
code sample below.
The top row (green) should be 40 px high. On my machine it is like 2/3 of the browser height.
I have tried every combination of height as attribute, height as style, height in the tr and td tag.
As soon as you say table the table completely ignores your row heights. This is where the netscape 4 flashbacks start triggering sweats and an irritating eye twitch.
Thanks for your attention.
Simeon
<code>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled</title>
<style>
html, body {padding:0px;margin:0px;overflow:hidden;height:100%;}
</style>
</head>
<body>
<table cellpadding="0" cellspacing="0" border="0" style="table-layout:fixed;width:100%;height:100%">
<tr style="background-color:green;height:40px;">
<td colspan="2" style="">
Top bar
</td>
</tr>
<tr>
<td style="background-color:Red;">
left
</td>
<td style="background-color:Blue;">
right
</td>
</tr>
</table>
</body>
</html>
</code>
