The following web page will render with unexpected result in Firefox 3.5. The first <address>
element will not have a pink background, but the second will. Is this only happening for me? Is my code incorrect? Or is it a bug?
Edit: This also happens in Firefox 3.6
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Firefox 3.5 bug!</title>
<style>
address
{
background: pink;
}
</style>
</head>
<body>
<address>
<ul>
<li>This will NOT have a pink background in Firefox 3.5</li>
</ul>
</address>
<address>
<p>But this will</p>
</address>
</body>
</html>
It's not really a bug, either in your html or the browser. It's more that you're using HTML5 and Firefox 3.x wasn't sufficiently HTML5 aware.
In HTML 4.01, the Address element was defined as:
so it only allowed inline content.
<ul>
isn't inline content, so Firefox 3.x, in its broken markup handling rules decided that it wouldn't allow the<ul>
to be inside the<address>
.Before HTML5, error handling behaviour wasn't standardized, and other browsers chose different error handling behaviour which allowed the
<ul>
to be inside the<address>
.When HTML5 came along, it changed the validity rules, so in that, the address element is defined as:
In this
<ul>
is valid within<address>
, so the HTML5 parsing rules were defined such that<ul>
will be placed inside an<address>
element by the parser.Firefox 4 and later uses an HTML5 parser, so your problem doesn't arise there.
And the moral of the story is, don't expect old browsers to support your modern markup.