The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Programming Fundamentals" Dec 02 - 2:00 PM Eastern

Problem with specificity

  • # October 8, 2008 at 3:22 pm


    So on my navigation bar, I have a 1px wide slice of a gradient that is repeating horizontally across the nav bar. On the left side and right side, I want to replace the background image with an image that has a rounded corner. For some reason, I can’t get it to override the background image that is already set.



    #navigation {color:#ffffff; display:block; list-style: none;; width:778px; height:42px; min-height:42px; margin-top: 20px;}
    #navigation li {float:left; text-align: center; line-height: 42px; display:block; background-image:url(images/buttonslice.png); height:42px; min-height:42px;}
    #navigation li:hover {float:left; text-align: center; line-height: 42px; display:block; background-image:url(images/buttonslice-over.png); height:42px; min-height:42px;}
    #navigation a {display:block; background:url(images/divider.png) repeat-y left top; text-decoration:none; color: #ffffff; padding: 0 10px;}

    #navigation .first li {background-image:url(images/leftedge.png) !important;}
    #navigation .first li:hover {background-image:url(images/leftedge-over.png) !important;}


    # October 8, 2008 at 3:47 pm

    It looks to me as if you’ve got your class in the wrong place.

    You have:

    #navigation .first li {your styles}

    And you should have

    #navigation li.first {your styles}
    # October 8, 2008 at 5:09 pm

    This reply has been reported for inappropriate content.

    Ok cool. Now I have a different problem. Is there any way that I can get the side image of the navigation bar to where on the left side, it just shows the rounded part, but then it repeats horizontally to the right but only repeats the right side. Here’s a picture to better illustrate what I want.

    # October 8, 2008 at 5:29 pm

    What you should probably do is leave the normal repeating slice as the background, and set your li to position: relative, and then absolutely position the corner piece. Without testing, I believe something like this may work.


    #navigation li {float:left; text-align: center; line-height: 42px; display:block; background:url(images/buttonslice.png) repeat-x; height:42px; min-height:42px; position: relative;}

    #navigation li .leftEdge{background: url(images/leftedge.png) no-repeat; width: 5px; height: 42px; position: absolute; left: -1px; top: -1px;}


  • Home
Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed