Question

I have a pretty straight-forward navigation menu, and I’m trying to style one item differently than the others. However, only the background is applied while other things like border radius and link color are not.

This is the menu:

<div class="menu">
    <ul>
        <li><a href="page1.php">Page1</a></li>
        <li><a href="page2.php">Page2 </a></li>
        <li><a href="page3.php">Page3 </a></li>
        <li class="extranav"><a href="extra.php">Extra</a></li>
    </ul>
</div>

These are the generic menu list styles:

.menu ul{ margin:0px; padding:0px;}
.menu ul li{ float:left; background:url(../images/sprator.png) right top no-repeat; padding-right:1px;} 
.menu ul li a{display:block; padding:0px 23px; font-size:12px; font-family:Arial, Helvetica, sans-serif; color:#fff; line-height:46px; text-decoration:none; text-transform:uppercase;}
.menu ul li a:hover{ display:block;background: #b04141; /* Old browsers */
background: -moz-linear-gradient(top, #b04141 0%, #c35151 39%, #c35151 62%, #c35151 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b04141), color-stop(39%,#c35151), color-stop(62%,#c35151), color-stop(100%,#c35151)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #b04141 0%,#c35151 39%,#c35151 62%,#c35151 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #b04141 0%,#c35151 39%,#c35151 62%,#c35151 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #b04141 0%,#c35151 39%,#c35151 62%,#c35151 100%); /* IE10+ */
background: linear-gradient(top, #b04141 0%,#c35151 39%,#c35151 62%,#c35151 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b04141', endColorstr='#c35151',GradientType=0 ); /* IE6-9 */}

And this is what I’m trying to apply to the extra nav element:

.extranav a{
    height:46px;
    color:#FF0000;
    line-height:46px;
    display:block;
    background: #206818; /* Old browsers */
    background: -moz-linear-gradient(top, #024A00 0%, #206818 39%, #347C2C 62%, #3E8636 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#024A00), color-stop(39%,#206818), color-stop(62%,#347C2C), color-stop(100%,#3E8636)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #024A00 0%,#206818 39%,#347C2C 62%,#3E8636 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #024A00 0%, #206818 39%, #347C2C 62%, #3E8636 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #024A00 0%, #206818 39%, #347C2C 62%, #3E8636 100%); /* IE10+ */
    background: linear-gradient(top, #024A00 0%, #206818 39%, #347C2C 62%, #3E8636 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#024A00', endColorstr='#3E8636',GradientType=0 ); /* IE6-9 */}
    -moz-border-radius: 0px 0px 10px 0px;
        -webkit-border-radius:0px 0px 10px 0px;
        -khtml-border-radius: 0px 0px 10px 0px;
        border-radius:0px 0px 10px 0px;
}

The background properties are applied properly, while other things like link color and border radius are not. Why is this happening and how do I fix it?

Fiddle: http://jsfiddle.net/68Vb6/

Answer 1

The border radius is not part of the style, you have a } that ends the style block before it.

Change this line:

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#024A00', endColorstr='#3E8636',GradientType=0 ); /* IE6-9 */}

to:

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#024A00', endColorstr='#3E8636',GradientType=0 ); /* IE6-9 */

The .menu ul li a selector is more specific than the .extranav a selector, so the settings in the first rule will take precedence. Change the selector to .menu ul li.extranav a to make it more specific.