I am trying to create a table that 100% of the viewport with three
rows. The top and bottom rows have a fixed height and the center row
I want to take up the rest of the space. This work fine in Mozilla
but I cannot control the row height exactly in IE. They work like
min-heights. Here is the code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
body{height:100 %;}
body{margin:0;p adding:0}
table{border-collapse:collap se}
td{padding:0px; vertical-align:top}
table{width:800 px;height:100%}
#row1{height:20 0px;background-color:yellow;}
#row2{backgroun d-color:blue;}
#row3{height:20 0px;background-color:red;}
</style>
</head>
<body>
<table>
<tr>
<td id="row1">
Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text
</td>
</tr>
<tr>
<td id="row2">
Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text
</td>
</tr>
<tr>
<td id="row3">
Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text
</td>
</tr>
</table>
</body>
</html>
I want row2 to take up the rest of the space, and with IE it is just
the opposite. If I add height:100% then I get the size of the
viewport in IE but I still get the extra space in Mozilla which is
what I want. Opera works properly to if I add position:absolu te to
the table.
This is still a problem if I go with a fixed height on IE like
height:600px.
Thanks for any help,
Tyler
By the way it works like I would like in quirks mode, but then I have
to use quirks mode and I don't want that.
