Firefox refusing to style element if CSS selector

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">[e-mail]</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

You could get around if you just target an id for the address. But as to why this is happening, if you open up the rendered source in Firebug, you'll notice that this is the rendered HTML:

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

The ul tag elements are rendered outside of the address tag, therefore the css fails.

Answer 2

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">[e-mail]</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 3

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.