My office’s website uses a template that’s based on our web folder structure. Serverside includes and stylesheets are brought into each page based on where it lives on the server, so only the content ever has to be coded when a new page is added.
For CSS, we basically load three sheets, in this order:
- Agency-wide stylesheet (controls main header and footer)
- Office stylesheet (default stylesheet for each of four offices)
- Topic stylesheet (specific stylesheet for that topic)
Sheets 2 and 3 above are where my question comes. In the office sheet, we have a main header for each office. This is a sort of generic default banner image. In the topic sheet, we have a header that is specific to that topic, and that takes the place of the generic one.
To do this, we have the following code:
<div id="header">
and this CSS in the office sheet:
#header { background: #fff url(/path/to/image.png) no-repeat top right; }
For a specific topic, we dynamically add a class:
<div id="header" class="topicname">
With the accompanying CSS:
#header .topicname { background: #fff url(/path/to/image.png) no-repeat top right; }
Now, my understanding is that the bottom CSS will override the top, since it’s loaded later on the page, however this isn’t the case. Not only is the generic header image loading, it’s not even SEEING the CSS for the topic header. If I comment out the generic header CSS, I get no banner image at all.
The only way I was able to make the header work was to remove the ID selector from the style, then add !important to the line:
.topicname { background: #fff url(/path/to/image.png) no-repeat top right!important; }
What am I doing wrong?
