Forum Moderators: not2easy
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
<title>table test</title>
<style type="text/css">
html, body, table {
padding:0px;
margin:0px;
width:100%;
height:100%;
}
.short {
height:50px;
}
</style>
</head>
<body>
<table cellspacing="0" cellpadding="0" border="1">
<tr>
<td class="short">This row should be only 50px high...</td>
<td>...but in IE6 it's about 3/4 of the viewport height.</td>
</tr>
<tr>
<td>This row should expand to 100% minus 50px.</td>
<td>Of course it all works in Mozilla.</td>
</tr>
</table>
</body>
</html>
What actually appears to be happening, is that IE, when faced with having to expand the table to 100%, is splitting the height 50/50 between the rows, then adding the 50px to the top row (via the td).
IE does seem to do a better job when you use a class on the lower td's and split the height by percentages, say 10% top 90% bottom.
IE does seem to do a better job when you use a class on the lower td's and split the height by percentages, say 10% top 90% bottom.
Even if I explicitly set the bottom cell and/or row to height:auto; IE still can't make the top cell an absolute height and make the bottom cell fill the remainder of the viewport.
Come on all you table-layout gurus, please let me in on the secret to a 100% high table!
Come on all you table-layout gurus, please let me in on the secret to a 100% high table!
I'm no table guru.. but the only answer I ever found was to use IE in quirks mode (doctype switch)
Suzy
I really don't like the idea of quirks mode, but I can't think of any other options!
....someone's complex nested table layout....
Ouch. Can't get them to let it go, huh? Bummer.
Ouch. Can't get them to let it go, huh? Bummer.
I ended up cheating: I ripped out the offending cell's content and stuffed it in an absolutely positioned div. I gave the div a bottom margin so there is always room for the footer row to show underneath. So now the page is mostly nested-table nightmare, with one nice neat div. It's robust in all relevant browsers, it was quick to do, and I doubt that anyone will ever notice that I cheated :)
