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 height="100%" 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>
tables with height="100%" with style="table-layout:fixed" in strict mode do not respect row or cell heights
jdunleav
See post: http://forums.microsoft.com/MSDN/ShowPost.aspx PostID=821294&SiteID=1
Regards,
Dariusz Jankowski
Sevugan
Try this on the table that u want 100% width and heigth on.
height:auto; width: auto;}
eldiener
DavidThi808
Sorry, that didn't work. It made the top row 40px; but the table is no longer 100% of the height. I need the table to be 100%, the top row to be 40px and the second row to be the remainder.
Simeon