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

Asked 15/10, 2011 at 17:44 Answered 16/10, 2011 at 0:12

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>

Cavalier answered 15/10, 2011 at 17:44 Comment(4)

Live demo: jsfiddle.net/simevidas/kPUpN (I have the latest Firefox, so I can't see the issue) – Barcot 15/10, 2011 at 17:47

Are you sure that you don't have a rule that would style the li differently? – Sosthina 15/10, 2011 at 18:3

@Juhana This is the exact file which I am experiencing the issue. There is only styling for address. – Cavalier 15/10, 2011 at 18:5

possible duplicate of Firefox refusing to style element if CSS selector contains address element – Trista 16/10, 2011 at 0:26

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.

Pulsar answered 16/10, 2011 at 0:4 Comment(1)

This is the correct answer. I know this because you were here: #4457548 ;) – Trista 16/10, 2011 at 0:28

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.

Uptotheminute answered 15/10, 2011 at 19:39 Comment(1)

<address>     test1     <ul>         <li>This will NOT have a pink background in Firefox 3.5</li>     </ul>     test2 </address>

, "test1" is in pink but "test2" is not. Looks like a browser bug. Everything is pink in Chromium. – Poison 15/10, 2011 at 22:52

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!

Belk answered 16/10, 2011 at 0:12 Comment(0)

-1

Try:

background-color: pink;

Extenuate answered 15/10, 2011 at 18:3 Comment(0)

Recommended topics

Hot tags