SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Enthusiast
    Join Date
    Jan 2004
    Location
    The Netherlands
    Posts
    44
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Does order in style sheet matter? see example

    Hi there,

    Here is a weird problem. I always thought that the order in which you put the different style elements in you style sheet did not matter for the end result. Well here is an example. I have probably done something stupid for ending up with this, but what?

    There is the example sheet:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/transitional.dtd">
    <HTML>
    <HEAD>
    <TITLE>
    Empty
    </TITLE>

    <style>

    /*--------------------content part of css------------*/

    #content {
    margin-left: 180px;
    border-left: 1px solid gray;
    margin-right: 165px;
    border-right: 1px solid gray;
    min-width: 150px;
    margin-top: 0px;
    padding: 10px;
    background: #888fff;
    font-size: 1.05em;
    font-weight: normal;
    font-style: normal;
    }

    #content a:link {
    color: #00F; /* also called blue */
    }

    #content a:visited {
    color: #00F;
    }

    /*--------------------submenu part of css------------*/

    #submenu {
    float: right;
    padding: 10px;
    font-size: 11px;
    clear: none;
    line-height: 150%;
    border: 1px dashed #0000b3;
    background-image: url(image/submenu.gif);
    margin-left: 10px;
    color: #000;
    }

    #submenu a:link {
    color: #000;
    text-decoration: none;
    border-bottom: none;
    }

    #submenu a:visited {
    color: #000;
    text-decoration: none;
    }

    </style>

    </HEAD>
    <BODY>

    <div id="submenu">
    <a href="http://www.nos.nl">Naar de dierentuin?</a>
    </div>

    <div id="content">
    <a href="http://www.nos.nl">Naar de dierentuin?</a>
    <div id="submenu">
    <a href="http://www.nos.nl">Naar de dierentuin?</a>
    </div>
    <br>
    <br>
    <br>
    <br>
    </div>

    </BODY>
    </HTML>

    So I want a submenu box in the content area of my site.

    Given the order the Content and Submenu part are now placed in the <style> tags there is actually no problem, i.e. the link in the submenu box gets the #000 color.

    However, if I switch both parts of the style sheet, so first submenu and then content, then the link gets the 00F color and is not influenced by the existence of the "#submenu a:link" part defining it as #000.

    How come the order in the style sheet matters in this example?

    Many thanks.

    Best regards,

    Marcel

  2. #2
    SitePoint Evangelist ClevaTreva's Avatar
    Join Date
    Jan 2004
    Location
    Chipping Campden, UK
    Posts
    403
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi

    Normally, you are right.

    However, the way you are defining the styles you are making some children of the other.

    The children MUST come after to parent, or else the parents style will overwrite them.




    Trevor

  3. #3
    Grumpy Mole Man Skunk's Avatar
    Join Date
    Jan 2001
    Location
    Lawrence, Kansas
    Posts
    2,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Your first problem is that you use the same ID twice within one document. IDs should only be used once; using them more than once is invalid and will lead to unspecified results.

    So let's change the ID in to a class (and reverse the order so we can see your problem in action):

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/transitional.dtd">
    <HTML>
    <HEAD>
    <TITLE>
    Empty
    </TITLE>
    
    <style>
    
    /*--------------------content part of css------------*/
    
    #content {
    margin-left: 180px;
    border-left: 1px solid gray;
    margin-right: 165px;
    border-right: 1px solid gray;
    min-width: 150px;
    margin-top: 0px;
    padding: 10px;
    background: #888fff;
    font-size: 1.05em;
    font-weight: normal;
    font-style: normal;
    }
    
    #content a:link {
    color: #00F; /* also called blue */
    }
    
    #content a:visited {
    color: #00F;
    }
    
    
    /*--------------------submenu part of css------------*/
    
    .submenu {
    float: right;
    padding: 10px;
    font-size: 11px;
    clear: none;
    line-height: 150%;
    border: 1px dashed #0000b3;
    background-image: url(image/submenu.gif);
    margin-left: 10px;
    color: #000;
    }
    
    .submenu a:link {
    color: #000;
    text-decoration: none;
    border-bottom: none;
    }
    
    .submenu a:visited {
    color: #000;
    text-decoration: none;
    }
    
    </style>
    
    </HEAD>
    <BODY>
    
    <div class="submenu">
    <a href="http://www.nos.nl">Naar de dierentuin?</a>
    </div>
    
    <div id="content">
    <a href="http://www.nos.nl">Naar de dierentuin?</a>
    <div class="submenu">
    <a href="http://www.nos.nl">Naar de dierentuin?</a>
    </div>
    <br>
    <br>
    <br>
    <br>
    </div>
    
    </BODY>
    </HTML>
    The problem is still occuring - in fact, with the above code it occurs independant of the order of the CSS sections. To understand why, you need to understand CSS specificity rules. Specificity in CSS controls how conflicting rules are resolved: if one rule says a link should be blue, and the other says it should be black, which one should be followed? The definitive guide to specificity rules is here, but in case you aren't up to wading through W3C specs at this time in the morning I'll walk you through the rules that apply in your case.

    Your selectors for link colour (after switching to classes instead of IDs for the submenus) look like this:

    Code:
    #content a:link {
      color: #00F; /* also called blue */
    }
    
    .submenu a:link {
      color: #000;
    }
    We need to work out the specificity of the selectors in the above. We do this by counting all references to classes, IDs and elements (it's actually a bit more involved than that but this description will suffice for the moment). Here's how it breaks down:

    #content a:link - 1 ID, 1 element, specificity = 0, 1, 0, 1
    .submenu a:link - 1 class, 1 element, specificity = 0, 0, 1, 1

    In CSS, "0, 1, 0, 1" is a higher specificity than "0, 0, 1, 1" so the #content a:link rule wins out.

    so how do you solve the problem? Try the following:

    Code:
    #content .submenu a:link {
      color: #000;
    }
    By adding in a descendant selector based on an ID, you create an overall selector with a specificity of:

    1 ID, 1 class, 1 element = 0, 1, 1, 1

    This beats 0, 1, 0, 1 and will result in the links inside the submenu inside the #content div coming up as black.

    Note that the above selector won't affect the submenu outside your content div. To get that one as well you need to do this:

    Code:
    .submenu a:link, #content .submenu a:link {
      color: #000;
    }
    And to answer the question in the thread subject: order in style sheet DOES matter, but only in cases where the specificity of two rules is the same.

    This could make a good blog entry I'll see about writing something up about this in the next day or so.

  4. #4
    SitePoint Enthusiast
    Join Date
    Jan 2004
    Location
    The Netherlands
    Posts
    44
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Many thanks

    Well, it seems my question has triggered something!

    Many thanks for the eleborate answer!

    Best regards,

    Marcel

  5. #5
    SitePoint Enthusiast
    Join Date
    Jan 2004
    Location
    The Netherlands
    Posts
    44
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    By the way I forgoty to ask: am I really using the same ID more than once? Where is that??

    Marcel

  6. #6
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,236
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by zeeforel
    By the way I forgoty to ask: am I really using the same ID more than once? Where is that??

    Marcel
    HTML Code:
    <BODY>
    
    [b]<div id="submenu">
    <a href="http://www.nos.nl">Naar de dierentuin?</a>
    </div>[/b]
    
    <div id="content">
    <a href="http://www.nos.nl">Naar de dierentuin?</a>
    [b]<div id="submenu">
    <a href="http://www.nos.nl">Naar de dierentuin?</a>
    </div>[/b]
    <br>
    <br>
    <br>
    <br>
    </div>
    
    </BODY>
    Duplicate ID elements are in bold

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

  8. #8
    SitePoint Enthusiast
    Join Date
    Jan 2004
    Location
    The Netherlands
    Posts
    44
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Ok!

    Quote Originally Posted by vgarcia
    HTML Code:
    <BODY>
    
    [b]<div id="submenu">
    <a href="http://www.nos.nl">Naar de dierentuin?</a>
    </div>[/b]
    
    <div id="content">
    <a href="http://www.nos.nl">Naar de dierentuin?</a>
    [b]<div id="submenu">
    <a href="http://www.nos.nl">Naar de dierentuin?</a>
    </div>[/b]
    <br>
    <br>
    <br>
    <br>
    </div>
    
    </BODY>
    Duplicate ID elements are in bold

    OK that's a duplicate, but it was only meant to show to types of constructions on one page!


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
  •