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

StackOverflow https://stackoverflow.com/questions/7779515

Question

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>
Was it helpful?

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.

OTHER TIPS

I've tried it, and you're right. It would appear that the background style is not inherited by the <ul> element in FF3.x in this instance.

Having experimented a bit, it seems to be specific to the <address>. If I change it to a <div> (and change the styling to match of course), then it works. See http://jsfiddle.net/kPUpN/2/

More peculiarly, if I change it to a <nav> then it doesn't work... unless I add the following CSS:

ul:background:inherit;

Unfortunately, while this trick does work with <nav>, it still doesn't work with <address>.

Even using address ul {background:pink;} didn't make it work. It's quite a stubborn one this one.

So it does seem that you've hit upon a bug with the browser. It's worth pointing out of course that Firefox 3.6 is several versions old now and that the current version does not apparently have this bug, so one assumes that the Mozilla people know about it and have fixed it, which is good... but doesn't really help you if you need it to work in FF3.6. I doubt they'll fix it in this old version now.

It does seem to be a specific issue with this tag combination and this browser version, so there should be plenty of scope for you to work around it. If it comes to it, the <address> element is fairly obscure anyway, so no-one will penalise you for using <div class='address'> instead.

As I tested FireFox html parser doesn't put UL tag inside address tag, so I think it's better to set background for ul explicitly!

Try:

background-color: pink;

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top