Why isn't my !important attribute working in Google Chrome?

Question

I have two CSS files in my web app: reset.css and screen.css. They appear in that order in the html (reset then screen).

In the reset.css, the following style definition occurs:

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
  border-bottom-width:0;
  border-color:initial;
  border-left-width:0;
  border-right-width:0;
  border-style:initial;
  border-top-width:0;
  font-family:inherit;
  font-size:100%;
  font-style:inherit;
  font-weight:inherit;
  margin-bottom:0;
  margin-left:0;
  margin-right:0;
  margin-top:0;
  outline-color:initial;
  outline-style:initial;
  outline-width:0;
  padding-bottom:0;
  padding-left:0;
  padding-right:0;
  padding-top:0;
  vertical-align:baseline;
}

You can see that span is in this list, and by default has a font-size of 100%.

In my screen.css, I have the following:

dl.labels-left dt span.req {
  display:inline;
  font-size:14px !important;
}

My HTML has the following excerpt:

<div>
    <dl class="labels-left">
        <dt class="larger-a-left">
            <label>Name:</label>
            <span class="req">*</span>
        </dt>
...

The problem I'm having is that the font-size: 14px !important; is being overridden by the CSS in the reset file, but only in Google Chrome. I can't work out why!

Here's a Firebug Lite screenshot showing the font-size crossed out: Firebug Screenshot http://www.damianbrady.com.au/images/firebug_screenshot.png

Why is my reset.css style being considered more important than the specific class definition?

According to my understanding of W3C CSS 2.1 Specificity, this shouldn't happen!

Answer 1

Maybe the inspector is crossing it out improperly but visually it's right?

Answer 2

It is a Firebug Lite bug. Firebug Lite is summing up the specificity value of each selector defined in the rule (and not only the matched ones like the CSS specification says), so it is resulting in a overestimated value.

I just filled an issue report for it. Please "star" (subscribe) the issue if you want to receive email updates about our progress with this particular problem:

http://code.google.com/p/fbug/issues/detail?id=3262

Also, next time, for Firebug / Firebug Lite issues, try using our discussion list or our bug tracking. Otherwise we may not be aware of the problem.

Thanks for the detailed report by the way!