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!
Maybe the inspector is crossing it out improperly but visually it’s right?