PDA

View Full Version : table height = 100% and doctype

Jeff
08-17-2006, 12:53 AM
I want a table that will fill the browser's height no matter what the browser size. For a half a decade now I've used height="100%" and it works great, except when I use dreamweaver the default <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> makes it not work at all and the table is scrunched up at the top (still stretches nicely to height in dreamweaver itself.)

What doctype should I use, or is there a better method to get the table to = 100% height of the page, no matter what the browser size?
Arthur
08-17-2006, 06:15 AM
The height attribute is proprietary (it's not valid HTML) and only works if the browser is in 'quirks mode (http://www.quirksmode.org/css/quirksmode.html)'. Adding a doctype puts the browser in strict mode, where the invalid HTML is ignored.
So, you can either remove the doctype or use valid markup. Here are some examples;
CSS centering (http://www.quirksmode.org/index.html?/css/centering.html)
100% Table Height (http://www.apptools.com/examples/tableheight.php)

-Arthur
Jeff
08-19-2006, 08:17 PM
Thanks Arthur!

Odd that the new way is so much longer than the old to accomplish the same thing, but I can live with it if that's the way of the future.
Jeff
09-07-2006, 02:07 PM
One more question:

Using the good old quirks mode, if I define simply:

table height="100%"
rowA height="200"
rowB
rowC height="150"

the table fills the browser 100%, (header) rowA stays exactly 200 pixels tall at the top, (footer) rowC stays exactly 150 pixels tall at the bottom, and rowB stretches to fill the space vertically for a body text area.

However, using http://www.apptools.com/examples/tableheight.php works great to stretch the table to fit vertically, except that now I don't know how to make rows A and C exact pixel heights and row B stretch to fill the space in Internet Explorer. Any ideas?

Any ideas?