Log in

View Full Version : 100% tbl height w/ fixed tr's


rayray1
04-14-2008, 10:29 PM
I am trying to create a 3-row-table with HEIGHT 100%, where row 1 and 3 should have a FIXED height (25px) !!, and row 2 a VARIABEL height, taking THE REMAINING x% of the page.

It works fine in Firefox. But unfortunately it does NOT work in IE.

WHY?????


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/strict.dtd">
<html style="height:100%" xmlns="http://www.w3.org/TR/xhtml1">
<head>
<title>layout</title>
</head>
<body style="height:100%">
<table style="width:100%;height:100%; table-layout: fixed;">
<tr style="height: 20px; ">
<td>
Top (This row is supposed to be of FIXED 25px height)
</td>
</tr>
<tr>
<td style="background-color: blue;">
Middle (This row is supposed to fill the ramining x% of the page!)
</td>
</tr>
<tr style="height: 20px; background-color:red;">
<td>
Top (This row is supposed to be of FIXED 25px height)
</td>
</tr>
</table>
</body>
</html>
boogyman
04-15-2008, 07:45 PM
for future reference, when you are posting computer code please use
tags as referenced in #8 of our Posting Policies and Regulations (http://dynamicdrive.com/forums/showthread.php?t=24866). there is a set format for this type of writing that makes it easier for those whom browse and try to help out can read easier. Thanks

try using a HTML 4.01 Strict. The transitional DOCTYPE was developed for when CSS was being introduced nearly over a decade ago. also, IE does not support XHTML therefore you are parsing the page as invalid HTML. two factors that could be the reason why your page isnt displaying properly.



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>layout</title>
</head>
<body>

<table style="width:100%;height:100%; table-layout: fixed;">
<tr style="height: 20px; ">
<td>
Top (This row is supposed to be of FIXED 25px height)
</td>
</tr>
<tr>
<td style="background-color: blue;">
Middle (This row is supposed to fill the ramining x% of the page!)
</td>
</tr>
<tr style="height: 20px; background-color:red;">
<td>
Top (This row is supposed to be of FIXED 25px height)
</td>
</tr>
</table>
</body>
</html>
emanuelle
04-17-2008, 09:16 AM
Hi

I have the same height problem
Writting it with the strict doctype does not make my table height 100%
Any other suggestions?