Grow your CSS skills. Land your dream job.

Problem with specificity

  • # October 8, 2008 at 3:22 pm

    Website: http://stuckpixelstudio.com/clients/carolinapeo/

    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.

    HTML:

    CSS:

    Code:
    #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;}

    Thanks.

    # October 8, 2008 at 3:47 pm

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

    You have:

    Code:
    #navigation .first li {your styles}

    And you should have

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

    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.

    css

    Code:
    #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;}

    html

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

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".