Welcome to WebmasterWorld Guest from 3.209.80.87

Forum Moderators: open

Message Too Old, No Replies

XHTML 1.0 Strict vs HTML 4.01 Transitional doctypes in Firefox?

Diferent render result in Firefox?

     
10:05 am on May 10, 2006 (gmt 0)

New User

10+ Year Member

joined:May 10, 2006
posts:3
votes: 0


Hi,

Messing up with a basic sandbox example I was making for xhtml 1.0 strict validation purpose, I found some interesting results between FireFox and IE.

Let's start by the following code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Layout Sandbox</title>
<style type="text/css">
.menu {
}
.menu_td {
height: 17px;
text-align: right;
}
.left_area {
width: 126px;
}
.right_area {
width: 474px;
}
.main_layout {
width: 600px;
}
.menu_items {
font-family: Verdana;
font-size: 10px;
font-weight: bold;
}
</style>
</head>

<body>

<table class="main_layout" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="left_area">
<table class="menu" width="100%" border="0" cellpadding="0" cellspacing="0">
<tr><td class="menu_td"><a href="javascript:;" class="menu_items">One</a></td></tr>
<tr><td class="menu_td" style="background-color:red;"><a href="javascript:;" class="menu_items">Two</a></td></tr>
<tr><td class="menu_td"><a href="javascript:;" class="menu_items">Three</a></td></tr>
<tr><td class="menu_td"><a href="javascript:;" class="menu_items">Four</a></td></tr>
</table>
</td>
<td class="right_area">
&nbsp;
</td>
</tr>
</table>

</body>
</html>

If I submit the code in W3C Validator Page [validator.w3.org] I can check it's a Valid XHTML 1.0 Strict! which was my intention.

So far so good ... now open it with Firefox, all seems correct. Now change just the DOCTYPE declaration to:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"[L=http://www.w3.org/TR/html4/loose.dtd]http://www.w3.org/TR/html4/loose.dtd[/L]">

Now refresh the Firefox browser ... in my 1.5.0.3 version of FF, the space between the links shrinks a bit.

In IE, this behaviour does not occur.

So, is it a Firefox bug? Anyone has any other idea about the subject?

One thing I noticed was that if I setup the height in the css (correctly at 17px) up until 20px, it always ends up being a 20px height (line number 2 has a red background, so I can manually count pixels). If I put 21px, then it starts to end as defined ... so the way I see it, it only resolves if height >=20px, any other value resets to 20px. That's why I say it's a bug ...

Thanks.

3:27 pm on May 10, 2006 (gmt 0)

Preferred Member

10+ Year Member

joined:July 2, 2004
posts:607
votes: 0


[quote]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"[L=http://www.w3.org/TR/html4/loose.dtd]http://www.w3.org/TR/html4/loose.dtd[/L]">
{/quote]

That *should* be:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">

What's probably happening is, you're throwing things into "quirks" mode with that weird doctype. Ie works great in quirks mode - just doesn't validate. I wouldn't call it a "bug"...just try putting in the right doctype and it'll probably be fine.

4:35 pm on May 10, 2006 (gmt 0)

New User

10+ Year Member

joined:May 10, 2006
posts:3
votes: 0


The correct doctype is:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Using HTML 4.01 or HTML 4.0 (as you pointed out) always produce correct values under Firefox ... but the way to go is XHTML 1.0 Strict, and in that doctype firefox messes up the heights ...

1:34 am on May 11, 2006 (gmt 0)

Senior Member from CA 

WebmasterWorld Senior Member encyclo is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Aug 31, 2003
posts:9074
votes: 6


This is probably not the result of a Firefox bug, but because of the rendering mode triggered in the browser caused by the change of doctype.

In Gecko (the Firefox rendering engine), there are three rendering modes, each triggered by different conditions. Standards-compliance mode is the default rendering mode - this mode is used when using the XHTML 1.0 Strict doctype, amongst others. Quirks mode is triggered when there is an older doctype or no doctype at all for the page - this mode mimics the bugs in older browsers for backwards-compatibility.

The third (and least well-known) rendering mode is called Almost Standards mode. This mode is triggered when using a HTML 4.01 Transitional or Frameset doctype with a public identifier (ie. an URL pointing to the DTD) as well as the XHTML 1.0 Transitional doctype. The Almost Standards mode is closely related to the more usual Standards mode, except when it comes to the handling of images in table cells, where it follows the rules from the Quirks Mode. For more information, see Gecko's "Almost Standards" Mode documentation [developer.mozilla.org] from the Mozilla Developer Center.

I suspect the difference you are seeing is a consequence of the Almost Standards mode - even though you are not using images within the table cells, the fact that Quirks mode rules are used within the cells will have consequences in terms of line heights, amongst other things.

9:54 am on May 11, 2006 (gmt 0)

New User

10+ Year Member

joined:May 10, 2006
posts:3
votes: 0


Thanks for the explanations :)

Ok, I can now understand that behaviour ... but then it means that I must have another way of setting up cell height other than height: 17px;, which will fully work on Standards-compliance when using the XHTML 1.0 Strict doctype.

Then again, it wouldn't make sense for the height attribute to work fine with values >=20px ...

That's what confuses me. Anyone knows any way of making a cell height with 17px in that doctype? It must work in FF and IE ...

Thanks