Table height="100%" gives different results on different browsers

[john_m]

Hi there,

I've just started work on the site,

<Sorry, no personal URLs.
See Terms of Service [webmasterworld.com]>

and have set the main table's height to be 100%. It displays fine in IE but in Firefox it doesn't fill up the whole page.

The HTML code is:
<table class="main" border="0" cellspacing="0" cellpadding="0"> and the CSS value for main is:
table.main {HEIGHT: 100%;}

Please help me because this is giving me a headache. I've tried many different combinations of CSS and HTML and have got the same result. Thanks in advance.

[edited by: tedster at 12:15 am (utc) on April 5, 2005]

[MWpro]

Try setting the height of the body to 100% as well.

[john_m]

I've set the height of both the body and the HTML to 100% to no avail :(

[tedster]

Is your purpose to have the layout perfectly fill the WINDOW? Or is it to fill the entire height of the PAGE - which also gets filled with other content in some other part of the layout?

[john_m]

the purpose is to fill up the whole screen so that at various resolutions, the table fills up the whole screen vertically.

------------------------
¦ ¦ TABLE ¦ ¦
¦ ¦ ¦ ¦
¦ ¦ ¦ ¦
¦ ¦ ¦ ¦
------------------------

The table is in the center of the page and has a different color that the background.

[john_m]

ignore my cheap ascii art- it didn't turn out right :(

[tedster]

OK, that's just weird. You said you have html and body rules for height:100% correct? And then the table has a class that also has a height:100% rule. And it's also the main "container" table for the page, not inside any other parent element except for body and html.

That really should do it as far as I know, unless there are errors in one or both documents. Have you validated the HTML and the CSS? I just solved a rendering problem for a friend and it boiled down to a missing } in his CSS file. You could stare for a long time and not see some typos, so it's good to check.

W3C Validator - HTML [validator.w3.org]
W3C Validator - CSS [jigsaw.w3.org]

[john_m]

It's the doctype (XHTML Transitional)! Once I remove it, it looks fine in Firefox- 100% height like I wanted. :( Aaargh!

[tedster]

Removing the doctype puts the browser into quirks mode - so that makes some sense. Firefox acts a lot more like IE in quirks mode. However, there still should be a way to do this in standards mode.

I've got my thinking cap on - you should not need to remove a DTD to get a page to render.

[bigtoga]

I found this whilst googling for the same issue myself: [apptools.com...]

You might dig the explanations

[bigtoga]

Also, this thread has a workable solution to using standards mode at the bottom:

[webmasterworld.com...]