SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2005
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Selectors Problem

    Guys I could really do with some help from a CSS guru as I am baffled with what I have just come across.

    I have never had a problem like this before with selecting various elements on the page and can not understand what is going wrong now.

    I have 3 navigation menu's all assigned different classes, 2 in a seperate div the other on its own. Now it works fine in IE6 but it is rubbish in FF, Opea, Netscape.

    After writing rules for the second and third menus, all menus on the page get confused and start going crazy reading the styles for the others. Now I have been pretty specific with the selectors, for instance

    Code:
    /* For the main Nav */
    #header ul.mainNav li {
    #header ul.mainNav a, a:visited {
    
    /* For the second Nav */
    #left ul.topics {
    #left ul.topics a, a:visited {
    
    /* For the third Nav */
    #left ul.subNavHome h3 {
    #left ul.subNavHome li {
    Now the links in the #header which are children of the ul list with the class of mainNav are reading the last stlyes set for links but styles that they should skip.

    Am I going mad or am I doing something wrong, I have created loads of CSS pages with multiple menus before and never had this screw up.

    Any help much appreciated

  2. #2
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    ?
    #header ul.mainNav a, a:visited {
    #header ul.mainNav a,#header ul.mainNav a:visited {

    if you use the name mainNav only one time
    .mainNav a,.mainNav a:visited {

    same for class topics

  3. #3
    SitePoint Enthusiast
    Join Date
    Nov 2005
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the reply,

    Perhaps I didn't make that code example clear

    Code:
    /* For the main Nav */
    #header ul.mainNav li {
    /* styles here */
    }
    #header ul.mainNav a, a:visited {
    /* styles here */
    }
    /* For the second Nav */
    #left ul.topics {
    /* styles here */
    }
    #left ul.topics a, a:visited {
    /* styles here */
    }
    /* For the third Nav */
    #left ul.subNavHome h3 {
    /* styles here */
    }
    #left ul.subNavHome li {
    /* styles here */
    }
    I have to use the class .mainNav more than once to style different elements within the ul.

    I just don't get what is going wrong.

  4. #4
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    #header ul.mainNav a, a:visited { a general link style ?
    #header ul.mainNav a, #header ul.mainNav a:visited { maybe this ?

    if you have one ? ul with the class .mainNav
    #header ul this is not needed
    .mainNav a,.mainNav a:visited {

    if you have one ul in the #header the class name is not needed
    #header ul a,#header ul a:visited {

  5. #5
    SitePoint Enthusiast
    Join Date
    Nov 2005
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    After ages of playing, I have got it working but I don't understand why it is not reading the CSS the way it should or the way I thought it should.

    I have basically taken the "#div" part and the "ul" part away from the begining of the selector.

    This is screwed

    Code:
    #header ul.mainNav li {
    }
    #header ul.mainNav a, a:visited {
    }
    #left ul.topics {
    }
    #left ul.topics a, a:visited {
    }
    #left ul.subNavHome h3 {
    }
    #left ul.subNavHome li {
    /* styles here */
    }
    This works

    Code:
    .mainNav li {
    }
    .mainNav a, a:visited {
    }
    .topics {
    }
    .topics a, a:visited {
    }
    .subNavHome h3 {
    }
    .subNavHome li {
    }
    I don't usualy go that deep into the inheritance within the selectors, but don't understand why the prior dosen't work and the later does. I have read the W3 site just now and it does not talk about elements getting confused when the selection in terms of the inheritance goes deep.

    As far as I was concerned it works like this

    #parent childOfParent ElementOfChildOfPrent ElementChildOfElementOfChildOfPrent {
    }

    Anyway I think I have had enough for one night I am off to bed

  6. #6
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    .mainNav a,.mainNav a:visited { link a of class mainNav, visited of class mainNav

    a:visited { a general style(s) for all the visited links on the hole page, you als cascade the same style(s) with your next css (for class .topics a), a:visited{

  7. #7
    SitePoint Enthusiast
    Join Date
    Nov 2005
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cheers, it has been a long night. lol


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
  •