table layout breaking when using DOCTYPE

Discussion in 'General Web Coding' started by antic, Apr 15, 2008.

  1. antic

    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!

Share This Page

JodoHost - 26,000 hosting end-users in 100 countries
Plesk Web Hosting
VPS Hosting
H-Sphere Web Hosting
Other Services