Firefox Refusing to Style Element If CSS Selector Contains Address Element

Firefox refusing to style element if CSS selector contains address element

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@website.com</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.

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

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.

What is wrong with this HTML5 address element?

HTML5 is still a draft. Firefox 3.6 doesn't completely support HTML5 yet.

And according to the HTML4 spec, address can only contain inline elements:

<!ELEMENT ADDRESS - - (%inline;)* -- information on author -->
<!ATTLIST ADDRESS
  %attrs;                              -- %coreattrs, %i18n, %events --
  >

This is why Firefox considers it invalid and your page breaks.

Ignoring Webkit-specific CSS selector in Firefox

Unfortunately, it's not possible without duplicating the declaration blocks, as the CSS spec stipulates that browsers must behave this way when encountering unrecognized selectors in CSS rules:

The selector consists of everything up to (but not including) the first left curly brace ({). A selector always goes together with a {}-block. When a user agent can't parse the selector (i.e., it is not valid CSS3), it must ignore the {}-block as well.

In this case, it's one vendor's browser being unable to recognize another vendor's prefixes, so it has to ignore the rule.

Refused to apply inline style because it violates the following Content Security Policy directive

You can also relax your CSP for styles by adding style-src 'self' 'unsafe-inline';

"content_security_policy": "default-src 'self' style-src 'self' 'unsafe-inline';" 

This will allow you to keep using inline style in your extension.

Important note

As others have pointed out, this is not recommended, and you should put all your CSS in a dedicated file. See the OWASP explanation on why CSS can be a vector for attacks (kudos to @ KayakinKoder for the link).

:not(:empty) CSS selector is not working?

Being a void element, an <input> element is considered empty by the HTML definition of "empty", since the content model of all void elements is always empty. So they will always match the :empty pseudo-class, whether or not they have a value. This is also why their value is represented by an attribute in the start tag, rather than text content within start and end tags.

Also, from the Selectors spec:

The :empty pseudo-class represents an element that has no children at all. In terms of the document tree, only element nodes and content nodes (such as DOM text nodes, CDATA nodes, and entity references) whose data has a non-zero length must be considered as affecting emptiness;

Consequently, input:not(:empty) will never match anything in a proper HTML document. (It would still work in a hypothetical XML document that defines an <input> element that can accept text or child elements.)

I don't think you can style empty <input> fields dynamically using just CSS (i.e. rules that apply whenever a field is empty, and don't once text is entered). You can select initially empty fields if they have an empty value attribute (input[value=""]) or lack the attribute altogether (input:not([value])), but that's about it.

Is there a way to find out where a css rule is coming from?

You may use web inspector in Chrome.

Right click on failing element and select inspect element.

You should end up with web inspector window with two sections: left is html nodes tree and right is styles and properties of selected node. Failing element should be selected already.

Next you need to expand "Computed Style" tab and look for offending style.

When found, you'll see small triangle to the left of style definition - it is clickable. On click it should expand list of selectors that affects this style for this element. You'll see url to css for each of this. Bingo.

How do I target elements with an attribute that has any value in CSS?

The following will match any anchor tag with a rel attribute defined:

a[rel]
{
    color: red;
}

http://www.w3.org/TR/CSS2/selector.html#pattern-matching

---

Update:
To account for the scenario @vsync mentioned, in the comment section (differentiating between emtpy/non-empty values), you could incorporate the CSS :not pseudo-class:

a[rel]:not([rel=""])
{
    color: red;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/:not

Whats wrong with my CSS/HTML in IE (even 9)

Little know fact: you need to put the modernizr script on inside the head tag, otherwise IE doesn't know how to style the elements before rendering them. The webpage is perfectly fine declared as html5, lots of production websites are already doing this.

---

Related Topics