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?

Ostiole

Wait scratch my earlier comment, it's valid HTML5. – Olsen

@Olsen I wonder why you added that tag :P – Nailhead

@alex: What, you want me to add [firefox] too? :P @jordanstephens: Nope, I tested it on my Firefox and see the same issue. – Olsen

@alex: I just removed that tag. – Olsen

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.

Betseybetsy

+1 This would be it since it's invalid HTML 4. By the way, congrats on 10k :D – Olsen

I see the same thing in firebug, but the address element is valid html 4 I think, it's only the footer tag that's html 5 and if you replace the footer with a div in the example and edit the css to match the error still seems to occur. Or is it that ul is not allowed inside address that's the problem? – Property

@tjm: It is not valid HTML 4 to contain a <ul> in an <address>. – Olsen

@Property I've added explanation - the reason is not that address is not a valid HTML4 element - it is - but rather, in the ul unordered list inside the address element that's invalid – Betseybetsy

@BoltClock, @Yi Jiang - Note that ADDRESS is itself a block level element - The part of the DTD quoted indicates that only inline level content is valid inside it. – Kelleykelli

@Kelleykelli Ah. Well that's what I get for not learning how to read DTDs. (I really should, but they do seem very arcane) – Betseybetsy

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.

Nigro

Tahnks for reminding, I mean wrap with <div class="address"> and use the css .address li { .. } – Nigro

Answer 3

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">[email protected]</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.

Retribution