Active link in CSS doesn't work

[usabilitymedic]

Thanks in advance for any help you can provide.

My research on CSS has indicated that I can designate a "state" within a style class for the active page but I can't seem to get it to work. The styles for the link, hovering and visited all work properly but not the active state. (Even on the relatively newer browsers: IE 6.0, Netscape 7 for PC and IE 5.0 for Mac)

So then I thought there might be some simple Javascript I could use but one forum respondent (not in WebProWorld) said that using Javascript for this was overkill and that she creates multiple versions of her navigation pages and codes the active page with a different style...even if the site has 100 pages. Thus, in the past I have opted to have multiple versions of my navigations as well.

Now, however, I am working on a site that has tertiary navigation. As a usability specialist I know how important it is to remind visitors where they are so I want to make sure I show a different style for the active page but since navigation now goes three levels deep, the maintenance would be ridiculous. (And since the site is for my family I am not being paid, so I can't keep spending hours and hours on maintenance.)

Below is the code I've used (in an external style sheet). All states work wonderfully except the active state. Nothing happens to it. It just maintains the "link" style.

A.tertiarynav:link { color: #FFFFFF; text-decoration:none; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9pt; font-weight:bold}
A.tertiarynav:hover { color: #FFCC00; text-decoration:none; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9pt; font-weight:bold}
A.tertiarynav:active { color: #FFCC00; text-decoration:none; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9pt; font-weight:bold}
A.tertiarynav:visited { color: #CCCCCC; text-decoration:none; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9pt; font-weight:bold}

Am I missing something? Or is there some common problem with using an active style that I need to work around? Or was I correct in assuming that there is some simple Javascript that can recognize the active page and apply the desired style? (FYI-I am a complete novice when it comes to Javascript. If your answer includes Javascript , please explain in as much plain english as possible or I might lose you.)

Thank you so much.

[mikmik]

Hi, it might have to do with the order of the link-state declarations in your CSS document.
This is a little thing(can't remember the word!) to remember the order of the elements, it is: "LoVe/HAte" as so -

Link
o
Visited
e
Hover
Active
t
e

to give:
A.tertiarynav:link { color: #FFFFFF; text-decoration:none; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9pt; font-weight:bold}
A.tertiarynav:visited { color: #CCCCCC; text-decoration:none; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9pt; font-weight:bold}
A.tertiarynav:hover { color: #FFCC00; text-decoration:none; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9pt; font-weight:bold}
A.tertiarynav:active { color: #FFCC00; text-decoration:none; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9pt; font-weight:bold}
A.tertiarynav:visited { color: #CCCCCC; text-decoration:none; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9pt; font-weight:bold}

YES!
Remember “LoVe/HAte” linking.
When specifying link pseudo-classes, always do so in this order: Link, Visited, Hover, Active. Any other order won’t work consistently. Consider using :focus as well, and modify the order to LVHFA (or “Lord Vader's Handle Formerly Anakin”, as suggested by Matt Haughey)
From mezzoblue 'CSS Crib Sheet' here:http://www.mezzoblue.com/css/cribsheet/

(note: an editing accident caused me to try to reproduce my original post and has resulted in my correctly identifying the scource of information for the brilliant advice I gave! LOL)
Thanks to everyone who helps everyone else around here, we all benifit.

I think originally I had this:
Syntax
The selectors for each of the pseudo classes have the following forms

the selector for normal links is a:link
the selector for visited links is a:visited
the selector for hover links is a:hover (note that this is not supported in Netscape Navigator 4.x)
the selector for active links is a:active
Specificity can create problems for the uninitiated here. Specificity is the style sheets principle which defines what happens when an element is selected and assigned properties by more than one selector. CSS has rules for which selector will take precedence in these situations, as explained in our Specificity section. Generally (and logically) things like class selectors will always be more specific than type selectors, and so their properties will override any properties defined by a type selector. Unfortunately link pseudo class selectors are not any more specific than type selectors, nor is any one of the link pseudo class selectors more specific than the others. Bearing in mind what we mentioned above about some of the link states not being mutually exclusive, eg a given link can be both in the hover state and also visited, you can see how the situation can occur here when two equally specific style sheet rules will conflict with one another. What happens then?

When selectors all have an equal specificity the selector which occurs further from the top of the style sheet prevails. What this means is that if you don't put your link pseudo class selectors in the same order in your style sheet as they are written above they won't do what you were expecting them to do. And if for whatever reason you have a simple type selector a as well, make sure you put it above all of the link pseudo element selectors.

To be absolutely clear about this, link and link pseudo class selectors should always appear in your style sheet in the following order. If your hover and active states don't appear to be working, make sure you check this out.
from here: http://www.westciv.com/style_master/academy/css_tutorial/selectors/p_class_selectors.html
In any event, there are some of my many great scources of info... ;o)

[paulhiles]

I think the word is inheritance Mik, so in other words, the various link behaviours (visited,hover, active) inherit their attributes/characteristics from the original 'link' description. Nice little memory jogger though Mik, can I use that? ;o)

Paul

[Corey Bryant]

Trysomething like:

A.tertiarynav:link { color: #FFFFFF; text-decoration:none; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9pt; font-weight:bold}
A.tertiarynav:visited { color: #CCCCCC; text-decoration:none; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9pt; font-weight:bold}
A.tertiarynav:hover { color: #FFCC00; text-decoration:none; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9pt; font-weight:bold}
A.tertiarynav:active { color: #FFCC00; text-decoration:none; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9pt; font-weight:bold}
http://www.w3schools.com/css/css_pseudo_classes.asp

a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective.
a:active MUST come after a:hover in the CSS definition in order to be effective!!

[mikmik]

paulhiles wrote:
Nice little memory jogger though Mik, can I use that? ;o)
Most certainly!
I didn't make that anacronym up, but I can't find where I got it from to give proper credit, might have been mezzoblue!
But the CSS community is so open and sharing with information, as I'm sure you know - half the links I get are from you anyways!- it is probably meant to be spread around. :o)
Thanks, usabilitymedic, for the name 'ananocronym'!

[paulhiles]

My research on CSS has indicated that I can designate a "state" within a style class for the active page but I can't seem to get it to work. The styles for the link, hovering and visited all work properly but not the active state. (Even on the relatively newer browsers: IE 6.0, Netscape 7 for PC and IE 5.0 for Mac)
Hi usabilitymedic,

Such a state does exist! :o) The technique should also address your concerns on navigation and usability... check out ProjectSeven's Uberlink List Menu (http://www.projectseven.com/tutorials/css_menus/list_01/). This ingenious CSS menu provides "the ability to mark the link that is associated with the current page... a 'you are here' reminder to keep your visitors oriented."

Hope that helps,

Paul

[usabilitymedic]

i have rearranged the link states as you all have indicated but it still does't work

i will, however, follow up on your resources and other suggestions to see what i can figure out.

many thanks for your time

[mikmik]

usabilitymedic wrote

...but it still does't work

If you provide a link to an example, or the page in question, I(we) might be able to help, still. There are a lot of other things to take into consideration in some circumstances. For instance, depending on the DTD, or lack of, etc. at the top of the page code, different browser in different circumstances can 'interpret' and render your styles differently.
It is a lot to explain, but keep in mind that these 'rules' can turn out different even between IE5.5, and IE6!
If you want to give us a link, we can look. :O)

[usabilitymedic]

If you provide a link to an example, or the page in question, I(we) might be able to help, still. There are a lot of other things to take into consideration in some circumstances. For instance, depending on the DTD, or lack of, etc. at the top of the page code, different browser in different circumstances can 'interpret' and render your styles differently.
It is a lot to explain, but keep in mind that these 'rules' can turn out different even between IE5.5, and IE6!
If you want to give us a link, we can look. :O)

Sorry for the delayed response. I've been away from WebProWorld for a bit.

You are great to offer continued help. I really would like to understand this better.

First...DTD? I guess you mean the DOC TYPE info. Here it is:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">

Perhaps it's completely wrong. I use BBEdit to code and it automatically inserts this info. I never gave it a second thought .

Anyway, if you still want to look at a link:
http://www.usabilitymedic.com/henriksen

There are only a few pages written and only a few links work so just click CALENDAR. It loads the first calendar (monthly) and the style that shows in the sub nav is the visited style, not my active style (dark green text)

You folks are the best :)

[ranjan]

check out ProjectSeven's Uberlink List Menu (http://www.projectseven.com/tutorials/css_menus/list_01/). This ingenious CSS menu provides "the ability to mark the link that is associated with the current page... a 'you are here' reminder to keep your visitors oriented."

I had an alternate way of doing this.

http://dreamlettes.net/tutorials/activelinks

[omegahertz2000]

Ok the css is in order,
.navbar a:link, .navbar a:visited, .navbar a:hover, .navbar a:active

As you can see I tried the class, and I tried it with #navbar a:link and so on. Now I want to know maybe I'm not associating it with the right tag properly. I'm using a table and would like to know besides the a tag, and I tried the td tag. These worked only for link, visited, and hover. Active appears when you click but doesn't stay active it goes back to link or visited. There has to be something stupid I'm doing wrong, but I can't see the answer right now. Unless it's a bug with dreamweaver mx 2004. I'd appreciate some input on this. Thanx...........................