Uberlinks not working

Unable to get current page to change state in menu

[faltered]

I've had success using uberlinks on several sites so far (a la project seven). However, I am cannot for the life of me get the currentpage state to work right on the menu I'm working on now.

Any ideas where I've gone wrong here? I checked and checked again but can't figure it out. Basically, what I want is for the text to change color and underline when rolled over (which it does correctly). And when that page is the page you're viewing, I want that name in the menu to turn black and be underlined. That is the part that's not working- the currentpage state.

Relevant css:
******************
/* Navigation */

#nav {
margin: 0px;
padding: 0px;
height: 33px;
width: 780px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #000000;
background-color: #CCCCCC;
}

#nav ul {
margin: 0px;
padding: 0px;
list-style-type: none;
width: 100%;
height: 33px;
float: right;
}

#nav li {
margin: 7px 27px 0px 29px;
padding: 0px;
float: left;
display: block;
height: 28px;
line-height: 20px;
}

#nav li a:link, #nav li a:visited, #nav li a:active {
margin: 0px;
padding: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: .84em;
color: #F40000;
text-decoration: none;
}

#nav li a:hover {
margin: 0px;
padding: 0px;
color: #FF8080;
text-decoration: underline;
font-family: Arial, Helvetica, sans-serif;
font-size: .84em;
}

#currentpage a:link, #currentpage a:visited, #currentpage a:hover, #currentpage a:active {
margin: 0px;
padding: 0px;
text-decoration: underline;
color: #000000;
}

***********************
Relevant xhtml:
***************
<div id="nav">
<ul>
<li id="currentpage"><a href="index.htm">Home</a></li>
<li><a href="paidcontent.htm">Management &amp; Leadership Modules</a></li>
<li><a href="freecontent.htm">Free Content</a></li>
<li><a href="contact.htm">Contact Us</a></li>
<li><a href="links.htm">Links</a></li>
</ul>
</div>
***************
It's probably something so simple that I'm overlooking. Any help is appreciated.

Thanks.

[Fotiman]

This rule:
#nav li a:link, #nav li a:visited, #nav li a:active {

is more specific than the rule to change your color, so it will always get priority. Change the rule that controls the "current" page to be more specific and it should work:

#currentpage #nav li a:link, #currentpage #nav li a:visited, #currentpage #nav li a:hover, #currentpage #nav li a:active {

Edit: For more information, see the CSS Spec regarding specificity [w3.org]

[faltered]

Thank you for your help.

I understand what you're saying, and it makes sense to me (although the CSS link you provided mind as well have been in another language).

However, when I change my #currentpage to be more specific, it still does not work.

I tried changing it to:

#currentpage #nav li a:link
#currentpage ul li a:link
#currentpage #nav ul li a:link

but none of them work. I have this working on another site with no problems. That is why this doesns't make sense to me.

[Fotiman]

Sorry, that's my fault... I didn't look close enough at your HTML and I though #currentpage was outside of the list (don't ask why). Here is the correct rule with the updated specificity.

#nav #currentpage a:link, #nav #currentpage a:visited, #nav #currentpage a:hover, #nav #currentpage a:active {

Alternatively:

li#currentpage a:link, li#currentpage a:visited, li#currentpage a:hover, li#currentpage a:active {

[faltered]

That did the trick! Thanks so much.

Any idea why the (#nav #currentpage li a:link) didn't work but the (li#currentpage a:link) did?

One day I'll get a hang of this css thing.

Thanks again.

[Fotiman]

Any idea why the (#nav #currentpage li a:link) didn't work but the (li#currentpage a:link) did?

Yes.

#nav #currentpage li a:link

That will match all a:link decendents of an li, which is a decendant of #currentpage, which is a decendant of #nav. In your case, the li is not a decendant of #currentpage, it IS #currentpage. Therefore, no match is found.

li#currentpage

That will match all li elements with an id of "currentpage". Therefore:

li#currentpage a:link

That will match all a:link decendants of an li with id currentpage.

[faltered]

Thanks so much. I really appreciate it.