Firefox refusing to style element if CSS selector contains address element

Question

Firefox appears to be refusing to style an html element if i use the <address> element in the CSS selector.

Example:

<footer>
    <address>
        <ul>
            <li id="email_address">[email protected]</li>
            <li id="phone_number">(555) 555 - 5555</li>
        </ul>
    </address>
</footer>

address li { color: #0000ff; } /* fails */
#phone_number { color: #ff0000; } /* works as expected */

I'm seeing this on FF 3.6.12, works as expected in Safari 5.0.3

Any idea why this is happening?

Answer 1

The reason for this is actually quite simple. Firefox 3.6 does not conform to the HTML5 draft specifications yet. Inspecting the <address> element with Firebug, we can see what Firefox sees:

<footer>
    <address>
        </address><ul>
            <li id="email_address">[email protected]</li>
            <li id="phone_number">(555) 555 - 5555</li>
        </ul>
</footer>

As you can see, Firefox has somehow interpreted your HTML as shown above. The <address> element is now empty, and thus the <li> elements are not styled.

But why? Looking through the HTML4 specifications, we can see that the <address> element is an inline element (as stated by Alohci in the comments) should only contain inline elements.

<!ELEMENT ADDRESS - - (%inline;)* -- information on author -->
<!ATTLIST ADDRESS
  %attrs;                              -- %coreattrs, %i18n, %events --
  >

Since Firefox 3.6 does not conform to the HTML5 specifications, to Firefox at least, the HTML you used above is not valid, and the way browsers deal with unspecified behavior is that they break, as shown above.

There's no way to fix this - HTML5 is only in the drafting stages, and browsers are not required to conform to them by any means. You may wish to submit a bug report to Mozilla's Bugzilla bug tracking system.

Answer 2

It looks like that is not allowed to containing any block elememt into <address> in Firefox, <address><span></span></address> is working well, maybe Firefox defines <address> an inline element in default. You can wrap a <div class="address"> to the <address>, even though it's ugly.