Problem with specificity

[brianatlarge]

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:

Code:

• Home
• Company Profile
• Why use a PEO
• The Industry
• Opportunity
• Additional Services
• Contact

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.

[Cotton]

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}

[Cotton]

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:

[Author]

Posts