Question

I have a template which sets global img tag properties as such:

#content img {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #CFCFCF;
    margin-bottom: 2px;
    padding: 2px;
}

I have a list on my page and one of the items needs to have a small transparent image. The styling above is causing the image to get a background and borders that I do not want. The list html is:

<div id="land_items">
<ul>
<li class="trace_item">
<a href="/imglink"><img src="img/popup.png"></a>
</li>
</ul>
</div>

I have tried to override the img tag with the code below, but Firebug continues to show these rules with a “strikethrough” indicating the global img styling above is taking precedence. I hear this could be because id css styles override class styles. How do I accomplish this?

li.trace_item img {
    background-color: transparent;
    border: none;
    padding: 0;
    margin: 0;
}

Answer 1

That’s because CSS uses specificity when applying the styles (it cascades)

It should work for you if you change it to

#content li.trace_item img {
    background-color: transparent;
    border: none;
    padding: 0;
    margin: 0;
}

Here’s specificity explained in Star Wars terms : http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html