100% high table with a doctype?

Forum Moderators: not2easy

Message Too Old, No Replies

100% high table with a doctype?

the doctype is stopping it stretching

Purple Martin

12:24 am on Jun 24, 2004 (gmt 0)

I've been asked to make an existing table-layout page stretch to 100% high so there's no gap between the footer and the bottom edge of the viewport. I'm not allowed to attempt a div version of the page.

If I give the table a CSS height without using a doctype it stretches to 100% high as desired:
<table style="height: 100%;">

As soon as I add the transitional doctype, it no longer stretches to 100% high. This is happening in Moz, Opera and IE.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Why is this happening? How do I make a table 100% high and have a doctype and keep it valid?

iamlost

12:53 am on Jun 24, 2004 (gmt 0)

Why is this happening?

"height" is not a <table> attribute. Remember that table was not expected to be used for webpage layout design. It is simply the sum of all its rows and headers and captions.

"height" is a deprecated <td> attribute. But that is not likely much help.

[w3.org ]

iamlost

12:58 am on Jun 24, 2004 (gmt 0)

This should do it:

html, body {width: 100%; height: 100%; margin: 0; padding: 0;}

This old "always include general fix-it" seem to solve your difficulty also.

Purple Martin

1:18 am on Jun 24, 2004 (gmt 0)

Thanks iamlost, but I've already got html and body set to 100% high and still no joy.

When I build a simple test page with a simple table this works, but it's not working for the big complex layout table on the real page. Odd.

Rambo Tribble

1:41 am on Jun 24, 2004 (gmt 0)

Out of curiosity, since Musciano & Kennedy indicate that NN & IE support a height property on the HTML table tag, have you tried setting it there instead of in CSS?

Also, is there anything that might be forcing the browsers into backwards-compatibility mode?

Purple Martin

3:05 am on Jun 24, 2004 (gmt 0)

Aaaargh! Now I've got the opposite problem. After jigging around with all sorts of bits, and removing height settings for deeply nested tables and cells, it stretches perfectly in Mozilla. But in IE, it's now more than 100% high!

Rambo Tribble, even though the attribute is supported I don't want to use it because it's not valid. And I doubt if the browsers are going into any strange mode because the page validates completely. But thanks for the suggestions anyway.