SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Wizard bronze trophy cydewaze's Avatar
    Join Date
    Jan 2006
    Location
    Merry Land, USA
    Posts
    1,074
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)

    Stylesheet overriding another stylesheet

    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:

    1) Agency-wide stylesheet (controls main header and footer)
    2) Office stylesheet (default stylesheet for each of four offices)
    3) 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:

    Code HTML4Strict:
    <div id="header">

    and this CSS in the office sheet:

    Code CSS:
    #header { background: #fff url(/path/to/image.png) no-repeat top right; }

    For a specific topic, we dynamically add a class:

    Code HTML4Strict:
    <div id="header" class="topicname">

    With the accompanying CSS:

    Code 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:

    Code CSS:
    .topicname { background: #fff url(/path/to/image.png) no-repeat top right!important; }

    What am I doing wrong?
    <cfset myblog = "http://cydewaze.org/">

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,782
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi,

    This:

    #header .topicname {}

    Would expect a structure like this:

    <div id="header">
    <div class="topicname">

    </div>
    </div>

    You need to remove the descendant selector (the space between the selectors).

    #header.topicname

    That rule will now apply as you expect.

  3. #3
    SitePoint Wizard bronze trophy cydewaze's Avatar
    Join Date
    Jan 2006
    Location
    Merry Land, USA
    Posts
    1,074
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Gah! Figures it was something simple like that.

    It works, of course. Thanks again Paul.
    <cfset myblog = "http://cydewaze.org/">


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •