...

View Full Version : 100%-height tables in Firefox standards-compliance mode



RichardCook
06-02-2005, 06:15 PM
Dear All,

I'm trying to create a page containing a table that fills the entire visible area of the current window. This is what I have so far:


<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>100% height</title>
</head>
<body>
<table style="width: 100%; height: 100%; background-color: #FF0000;">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
</body>
</html>


Clearly the table is happening stretching to 100% width, but the height isn't affected. What am I doing wrong here? Note, that it is very important that this page validates as XHTML and runs in Firefox's standards-compliance mode, so I cannot remove the XML and !DOCTYPE declarations.

Thanks, Richard.

little_toaster
06-02-2005, 06:43 PM
Could you not use CSS, It is a much more approved method
of laying out pages, diminishes the glitches of tables for layout!

There was never meant to be a height attribute for <table>, but thats not the real reason for the indifference; there is a difference between the browsers viewpoint height, and the block tags <table> and <html>'s 100% attribute height; Using the table method you get 100% of the block tags!, not the page!

I would push you towards a CSS layout;
<style>
html,body{
margin:0;
padding:0;
height:100%;
border:none
}
</style>
:thumbsup:

Bill Posters
06-02-2005, 07:11 PM
<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


Note, that it is very important that this page validates as XHTML and runs in Firefox's standards-compliance mode, so I cannot remove the XML and !DOCTYPE declarations.

Thanks, Richard.
Fwiw, (afaik) unless you're actually serving your xhtml markup as xml (i.e. using the application/xhtml+xml mime-type), the xml prologue is completely redundant (serving only to do damage in MSIE6).
The markup will still validate as XHTML 1.0 Transitional without the xml prologue.

Additionally, are you passing any character encoding in the headers? There appears to be no mention of character encoding in either meta tag or xml prologue format.
As is, unless you're passing character encoding through the served headers, then the code you present there won't validate. I'm not sure how character encoding passed only via the server is dealt with regarding validity and validators.


<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<?xml version="1.0" encoding="utf-8"?>

fwiw.

RichardCook
06-02-2005, 07:27 PM
Could you not use CSS, It is a much more approved method
of laying out pages, diminishes the glitches of tables for layout!

There was never meant to be a height attribute for <table>, but thats not the real reason for the indifference; there is a difference between the browsers viewpoint height, and the block tags <table> and <html>'s 100% attribute height; Using the table method you get 100% of the block tags!, not the page!

I would push you towards a CSS layout;
<style>
html,body{
margin:0;
padding:0;
height:100%;
border:none
}
</style>
:thumbsup:

Thanks very much! That's perfect.

I am actively pushing my site's design towards CSS layout as much as is possible.

Best regards, Richard.

RichardCook
06-02-2005, 07:30 PM
Fwiw, (afaik) unless you're actually serving your xhtml markup as xml (i.e. using the application/xhtml+xml mime-type), the xml prologue is completely redundant (serving only to do damage in MSIE6).
The markup will still validate as XHTML 1.0 Transitional without the xml prologue.

From my experience, the XML and !DOCTYPE declarations are required to force Firefox into full standards-compliance mode instead of quirks mode.


Additionally, are you passing any character encoding in the headers? There appears to be no mention of character encoding in either meta tag or xml prologue format.

My server is passing a "Content-Type" header with content "text/html; charset=iso-8859-1". I will in future be inserting the <meta /> elements as you suggest, however.

Thanks for the tips!

Richard.

Bill Posters
06-02-2005, 08:46 PM
From my experience, the XML and !DOCTYPE declarations are required to force Firefox into full standards-compliance mode instead of quirks mode.
The presence of the DTD is, of course, absolutely necessary for any browser to be put into compliant mode* (and for the markup to be valid), but as for the necessary presence of the xml prologue - I'm certain that can't be correct.
(* or as close as it can get, in some cases)

I've produced a number of sites using valid XHTML 1.0 Strict DTDs and I've not used the xml prologue in any of those which are served as text/html.
The Firefox Web Developer toolbar (http://extensionroom.mozdev.org/more-info/webdeveloper) (a life/time-saver and an absolute must-have for any developer using FF) has a icon on the r/h/s that notifies users when a site/page has placed FF into standards-compliant mode or not. Every site I produce places FF into standards-compliant mode.

I can't say beyond that, but I've certainly never had any issues developing/testing within Firefox that could be put down to Firefox not really being in standards-compliant mode.


My server is passing a "Content-Type" header with content "text/html; charset=iso-8859-1". I will in future be inserting the <meta /> elements as you suggest, however.

Thanks for the tips!

Richard.
In that case, the xml prologue really is redundant.
Lose it. ;)


Btw, is this for a closed network or intranet where all users will be using FF?

little_toaster
06-02-2005, 08:49 PM
:thumbsup:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum