#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2003
    Posts
    26
    Rep Power
    0

    css inheritance problem


    I have a div that is given a bottom border through the ID tag.. I want to override the border with a class.

    I think the problem is something to do with how I am naming the nobdr class in my css.

    Thanks for any help!
    Reid


    HTML HERE:
    PHP Code:
        <div id="primary" class="nobdr">
        <
    a href="#">Checking</a>
        <
    a href="#">Savings Certificates</a>
        <
    a href="#">Credit Cards</a>
        <
    a href="#" class="navA">Personal Loans</a>
        </
    div

    CSS HERE:

    #primary{ border-bottom: 1px #fff solid; width:197px; padding: 0px 0px 20px 15px;}

    #primary .nobdr{ border-bottom: none;}
  2. #2
  3. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2003
    Posts
    6
    Rep Power
    0
    You need to remove the space between "#primary .nobdr". It should be...
    #primary.nobdr{ border-bottom: none;}

    Having a space between them means the rule only applies to elements with the classname "nobdr" that are children of an element with the id "primary".
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2003
    Posts
    26
    Rep Power
    0

    thanks


    Got it... thanks.
  6. #4
  7. |<.+#f@#+.&.|
    Devshed Loyal (3000 - 3499 posts)

    Join Date
    Mar 2002
    Location
    norway
    Posts
    3,009
    Rep Power
    1224
    may i ask why you want to overide the id?
    as id is supossed to be unique to one element,
    there wouldn't be much sense to overide it with a class,

    simply just have
    #primary{ border-bottom:none; width:197px; padding: 0px 0px 20px 15px;}
  8. #5
  9. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2003
    Posts
    6
    Rep Power
    0
    excellent point.
  10. #6
  11. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Feb 2001
    Location
    USA
    Posts
    830
    Rep Power
    14
    There are situations where that could be useful. He may have only showed excerpts from his style sheets.

    P.S. What he originally had was a descendent selector, not a child selector. It might seem like a minor distinction, but I can't tell you how often I curse IE 5 Win for not supporting child selectors.
  12. #7
  13. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2003
    Posts
    26
    Rep Power
    0

    explained


    The reason is that I wanted the id to still inherit all of the properties of primary. Also, primary has child attributes that I still wanted the div to inherit.

    More of my css below:


    #primary{ border-bottom: 1px #fff solid; width:197px; padding: 0px 0px 20px 15px;}

    #primary A{color: #fff; text-decoration: none; font-weight: bold; display:block; width:150px; margin: 15px 0px 0px 0px;}
    #primary A:hover{color: #ff6;text-decoration: underline; font-weight: bold;}


    /*tertiary nav*/
    #primary a.navA {color: #ff6;}

    #tNav {padding: 0px; margin: 0px 0px 0px 15px;}
    #tNav A{font-size: 10px; margin:0px;}



    #primary.nobdr{ border-bottom: none;}
  14. #8
  15. |<.+#f@#+.&.|
    Devshed Loyal (3000 - 3499 posts)

    Join Date
    Mar 2002
    Location
    norway
    Posts
    3,009
    Rep Power
    1224
    but this doesn't chang anything

    there isn't a point with that class,
    to overrule the id, when you just can have it in the id,

    the id can just be used once in a document, like on one div tag,
    http://www.w3.org/TR/html401/struct/global.html#adef-id

    if it had been the other way around i could have understood,

    if you had a class .primary which you assign to several elements,
    then used a id #nobr to get rid of the border to one of the elements ,
  16. #9
  17. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2003
    Posts
    26
    Rep Power
    0

    bigger picture


    Here is some more information:

    I have a css file that is being used across many templates within a site. On each of the templates I am using a div with the id="primary". On some pages I want to override one of the properties the id is inheriting (the bottom border), but I want all the other properties for primary and it's child selectors to apply.


    If I just removed the bottom border from the id, all of the other pages that are using the id would also be affected. My choice then is to either override(as i chose to do with the class) or create another unique ID and then duplicate all of the child stuff.

    --
    Reid
  18. #10
  19. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Feb 2001
    Location
    USA
    Posts
    830
    Rep Power
    14
    Actally, reid, on the pages where you want to override that particular property setting, you can just use an internal style sheet and set that property on your ID, e.g.

    Code:
    /* in internal style sheet */
    
    #primary {
    
      border-bottom: none;
    
    }
  20. #11
  21. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2003
    Posts
    26
    Rep Power
    0

    understood


    Hmm...

    My solution...

    adds this HTML
    class="nobdr"

    and this CSS
    #primary.nobdr{ border-bottom: none;}


    Yours would add this:

    <style type="text/css">
    #primary { border-bottom: none;}
    </style>


    Am I missing something? I'm curious why should I use the internal style sheet over my solution. Don't they both accomplish the same thing with around the same amount of overhead?

    Reid

IMN logo majestic logo threadwatch logo seochat tools logo