SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Thread: CSS UL help

  1. #1
    runat="server" Golgotha's Avatar
    Join Date
    Nov 2001
    Location
    Colorado
    Posts
    2,085
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS UL help

    view this page and source: http://www.search-this.com/lab/UL-css.html

    how come .subCategory is displaying both backgrounds?

    how come .subCategorylia is not colored red?

    I would think that because I gave the embed UL it's own class that would take precedence?

    What am I missing about inheritance?




  2. #2
    Caveat surfer Buddy Bradley's Avatar
    Join Date
    May 2003
    Location
    Cambridge, UK
    Posts
    2,366
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The reason both backgrounds are being used is that you've declared one on the A and one on the LI - the second declaration doesn't override the first as it relates to a different element.

    The reason the colour isn't working is down to specificity. The original declaration (#mainNavigation ul li a:link) has an id in its selector, but the second one (.subCategory li a) only has a class. Any selector with an id 'wins' against one without, regardless of whether there is a class present.

    Have a read of this article on specificity to learn more.

  3. #3
    runat="server" Golgotha's Avatar
    Join Date
    Nov 2001
    Location
    Colorado
    Posts
    2,085
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hmmm, made some changes, but still I have ploblems.
    http://www.search-this.com/lab/UL-css.html

  4. #4
    Caveat surfer Buddy Bradley's Avatar
    Join Date
    May 2003
    Location
    Cambridge, UK
    Posts
    2,366
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What problems? The colour isn't red because now you've set it to black, and also screwed up the selector:
    Code:
    .subCategory ul li a:link,
    .subCategory ul li a:visited {
    	color:#000000;
    	text-decoration:none;
    }
    The subCategory class is on the UL, not a parent element, so your rule should be:
    Code:
    ul.subCategory li a:link,
    ul.subCategory li a:visited {
    	color:#000000;
    	text-decoration:none;
    }


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
  •