Firefox 3.5 & 3.6: Unable to style <address> if it contains an <ul>

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>

Solution

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:

<!ELEMENT ADDRESS - - (%inline;)* -- information on author -->

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:

4.4.10 The address element
  Content model:
    Flow content, but with no heading content descendants, no sectioning 
    content descendants, and no header, footer, or address element descendants.

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.