table layout breaking when using DOCTYPE

antic

Perch
I'm not ashamed to admit to a fondness of tables for various layout tasks; not for everything, but they do some things you just can't do with css. One of these things is the magical resizing layout.

This is my basic HTML (excuse the attempt to indent):
Code:
<html>
<body>
. <table cellspacing="0" cellpadding="0" border="0" width="100%" height="100%">
. . <tr height="100">
. . . <td>heading</td>
. . </tr>
. . <tr height="30">
. . . <td>menu</td>
. . </tr>
. . <tr>
. . . <td>body</td>
. . </tr>
. . <tr height="20">
. . . <td>footer</td>
. . </tr>
. </table>
</body>
</html>
Always worked brilliantly, resulting in this sort of thing:
Code:
------------------------------
header (fixed height)
------------------------------
menu (fixed height)
------------------------------

body (resizes to browser height!1!11)

------------------------------
footer (fixed height)
------------------------------
I'm a fan of this layout, but now I have one small problem; it breaks when I add a DOCTYPE at the top, as such:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

If that line is not in the document, it works fine. But with that line, the table fails to fit itself to 100% height. It simply "collapses" as if my table's "height=100%" is being rudely dismissed. I've tried everything I can think of, so does anyone here know how to include a DOCTYPE line and retain that height=100% functionality?

Hope someone can help!
 
Back
Top