All geek questions in one place

Firefox 3.5 and 3.6: Unable to create <address> style if it contains <ul>

The following webpage will display with unexpected results in Firefox 3.5. The first <address> element will not have a pink background, but the second will. Is it just for me? Is the code incorrect? Or is this a mistake?

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>
+6
source share
4 answers

This is not an error, both in your html and in the browser. Moreover, you are using HTML5 and Firefox 3.x is not sufficiently knowledgeable about HTML5.

In HTML 4.01, the Address element was defined as:

 <!ELEMENT ADDRESS - - (%inline;)* -- information on author -->

therefore, it only allows embedded content. <ul> not inline content, so Firefox 3.x in its processing rules with broken markups decided that it would not allow <ul> be inside <address> .

Prior to HTML5, error handling behavior was not standardized, and other browsers chose different error handling behavior that allowed <ul> be inside <address> .

When HTML5 appeared, it changed the rules of reality, so 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.

This <ul> valid within the <address> , so HTML5 parsing rules have been defined so that the <ul> will be placed inside the <address> element by the parser.

Firefox 4 and later uses the HTML5 parser, so your problem doesn't arise there.

And the moral of this story is, don't expect older browsers to support your modern markup.

+9
source

I tried, and you're right. It seems that the background style is not inherited by the <ul> element in FF3.x in this case.

Having experimented a bit, this is similar to <address> . If I change it to <div> (and, of course, change the style to fit), then it will work. See http://jsfiddle.net/kPUpN/2/

More specifically, if I changed it to <nav> then it won't work ... unless you add the following CSS:

 ul:background:inherit;

Unfortunately, although this trick works with <nav> , it still does not work with <address> .

Even using address ul {background:pink;} did not help. This one is pretty stubborn this one.

So it looks like you got into a problem with the browser. It is worth noting, of course, that Firefox 3.6 is now several versions of older versions, and that the current version does not seem to have this error, so it’s assumed that Mozilla people know about it and fixed it, which is good ... but doesn’t, t really help you if you need it to work in FF3.6. I doubt they will fix it in this old version.

This seems to be a special problem with this combination of tags and this version of the browser, so there should be enough features for it to work. If it comes to this, the <address> element will still be obscure, so no one will punish you for using <div class='address'> .

+1
source

As I tested, firefox html parser does not put the UL tag inside the address tag, so I think it's better to set the background for UL explicitly!

0
source

Try:

background-color: pink;

-1
source

Source: https://habr.com/ru/post/899369/

More articles:


All Articles