tags:

views:

74

answers:

2
+1  Q: 

CSS refuse to obey

Hi, I'll make this short, I got this webpage :

<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head>
    <link rel="Stylesheet" type="text/css" href="css/style.css" />
    <link rel="Stylesheet" type="text/css" href="css/nav.css" />
</head>
<body>
    <div id="header">
        <ul id="navList">
            <li><a href="#" id="navActive">foo</a></li>
            <li><a href="#">bar</a></li>
       </ul>
    </div>
</body>
</html>

With this CSS
style.css

body
{
    padding:0;
    margin:0;
    background-color:#000000;
    background-repeat:no-repeat;
    background-image:url('../img/bg.jpg');
}

nav.css

#navList
{
    padding:0;
    margin:0;
    background-image:url('../img/menu.png');
    list-style-type:none;
    padding:12px 150px;
}

#navList li
{
    display:inline;
}

#navList li a
{
    color:#bfbfbf;
    padding:14px 25px;
    text-decoration:none;
}

#navList li a:hover
{
    color:#000000;
    background-color:#bfbfbf;
    text-decoration:none;
}

#navActive
{
    color:#000000;
    background-color:#bfbfbf;
}

It looks like the CSS from the navActive id is never being applied... Could someone tell me why and/or suggest me a way to correct this.

Thanks.

A: 

Try this:

#navActive
{
    color:#000000 !important;
    background-color:#bfbfbf;
}

Here's a demo. It's a specificity fight, in this case the original #navList li a is winning. Another alternative is using #navList li a#navActive without the !important.

Nick Craver
+3  A: 

It's because the selector

#navList li a

is more heavily weighted than

#navActive

as it is more specific.

You can overcome it by adding

color:#000000 !important;

or using

#navList li a#navActive

as the selector

Alex
I thought that an ID selector has the highest specificity, is this not correct?
bcherry
Alex is correct. The scores are added together, so an id with 2 tags is more specific than an id by itself.
enduro
Is the "!important" tag compatible with every browser?
Frank