Current class being overwritten

HTML & CSS
1

I can’t get my Current page font to work.

For some reason this part is overriding it

#MainNav ul li a{
text-decoration:none;
display:inline;
padding:10px 15px;
border-top-right-radius:10px;
border-top-left-radius:10px;
color:#666666;

}

/* Main Nav */

#Navigation {
width:100%;
margin:0 auto;
border-bottom:thin solid #999;
padding-top:9px;
padding-bottom:9px;

}

#NavigationContainer {
width:1024px;
margin:0 auto;
}

#MainNav ul{
list-style-type:none;
display:inline;

}

#MainNav ul li{
display:inline;
font-size:16px;
font-weight:bold;
margin-right:2px;
line-height:100%;

}

#MainNav li{
display:inline;
font-weight:100;
margin-right:25px;

}

#MainNav ul li a{
text-decoration:none;
display:inline;
padding:10px 15px;
border-top-right-radius:10px;
border-top-left-radius:10px;
color:#666666;

}

#MainNav ul li a:hover{
background-color:#48af71;
color:#FFFFFF;

}

.CurrentPage {
background-color:#48af71;
color:#FFFFFF;

}

.CurrentPage {
background-color:#48af71;
color:#FFFFFF;

}

<div id=“Navigation”>

<div id=“NavigationContainer”>

<div id=“MainNav”>

<ul>
<li> <a href=“Tools.html” class=“CurrentPage” title=“Tools” target=“_self”>Admin pages</a></li>
<li> <a href=“Tools.html” title=“Tools” target=“_self”>My workspace</a></li>
<li> <a href=“Tools.html” title=“Tools” target=“_self”>Marketing</a></li>
<li> <a href=“Tools.html” title=“Tools” target=“_self”>Post Office</a></li>

</ul>

</div><!–MainNav–>

</div><!–NavigationContainer–>

</div><!–Navigation–>

2

You haven’t given us a lot to go on here. What exactly isn’t working the way you want?

3

I can’t get the font to become white using the .CurrentPage class.

The font for this, “<li> <a href=“Tools.html” class=“CurrentPage” title=“Tools” target=”_self">Admin pages</a></li>"

remains grey because of this

4

Ah, OK. This is an issue of CSS specificity. You need to change this:

.CurrentPage {
  background-color:#48af71;
  color:#FFFFFF;
}

to this

[COLOR="#FF0000"]#MainNav ul li a.[/COLOR]CurrentPage {
  background-color:#48af71;
  color:#FFFFFF;
}
5

Thanks this stumped me for a long time and now its working perfect!

6

No probs! Specificity is really key to CSS. It’s why I use IDs very sparingly, as they are quite hard to override, as you now see. Does this mean your other question about slanted lines next to menu items has been left behind?

7

No. You answered the slanted line question pretty good, but I still have issues and need to get back that. This is a different nav. I’ll respond to that other one soon. thx