Incorrect Row Height in IE 6

Yeah, I feel like a retard. I've read all the appropriate sites (positioniseverything.com, quirksmode.com) and I still can't get simple table height to work in IE 6 when using a doctype instead of letting the browser default to quirksmode.

The setup:
0. Specify a loose or strict html4 doctype
1. Use CSS to set html/body height to 100%
2. Create a table, use css to set height to 100%
3. Create two rows with one cell each.
4. Use css to set the first row's height to 30px

The result:
In IE 6, the first row is more than half the height of the page instead of being 30px tall. It works correctly in Mozilla. What am I missing?

thanks

p.s. Here's a simple test HTML doc:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<style>
html, body
{
 margin:0;
 padding:0;
 height:100%;
 border:none;
}
</style>
</head>
<body>
<table style="width:100%;height:100%;">
 <tr style="background-color:orange;height:30px;">
 <td>
 My Header
 </td>
 </tr>
 <tr style="background-color:red;">
 <td>
 My Body
 </td>
 </tr>
</table>
</body>
</html>

[edited by: tedster at 8:58 am (utc) on Aug. 29, 2005]
[edit reason] Disable graphic smiles [/edit]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>test</title> <style type="text/css"> html, body { margin:0; padding:0; height:100%; border:none; background-color:red; } #header { background-color:orange; height:30px; } </style> </head> <body> <div id="header">My Header</div> <p>My Body</p> </body> </html>

Incorrect Row Height in IE 6

bxbxgrant

encyclo

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week