Problem with links...

[Jick]

Does anybody know why the following code would not work.

a:link, a:active, a:visited {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

It works fine until I visit a link. Then when I go back to the page and hover over the link again the underline won't show up. This is happening in all browsers I tested it in.

[MstrBob]

There might be some issues with links. If I have this straight, the method used to define link pseudoclasses is to define them in this order so that they work right:

a:link
a:visited
a:hover
a:active

I think that's how it goes. But a different order can cause issues in some browsers, for one reason or another. This may/may not be the cause.

[pawky]

Originally posted by MstrBob
There might be some issues with links. If I have this straight, the method used to define link pseudoclasses is to define them in this order so that they work right:

a:link
a:visited
a:hover
a:active

I think that's how it goes. But a different order can cause issues in some browsers, for one reason or another. This may/may not be the cause.

probably is, its also listed in w3c that it has to be in the order i believe

[Jick]

Ok, so if I understand you correctly my code should be like this:

a:link { text-decoration: none; }
a:visited { text-decoration: none; }
a:hover { text-decoration: underline; }
a:active { text-decoration: none; }

But I tried that and it doesn't fix the problem.

[MstrBob]

Yes, it should. You can list them with commas, but, I believe, they must be in that order. On your personal website, you have this:

a:link, a:active, a:visited { color: #069; text-decoration: none; }

a:hover { color: #036; text-decoration: underline; }

And it works just fine. Also, I tend to find that active links are like hover links. Therefore, I group it with the hover styles. So:

a:link, a:visited { color: #069; text-decoration: none; }

a:hover, a:active { color: #036; text-decoration: underline; }

Should work.

[Jick]

Ok, thanks!

P.S. I found out what was wrong. I'm so stupid. It had nothing to do with the links. It was somewhere later in the CSS file where I accidentally had something like this:

.class a:link, a:active, a:visited {
        //stuff here
}

But it should have been this:

.class a:link, .class a:active, .class a:visited {
        //stuff here
}

I feel so stupid now.

[pawky]

Originally posted by Jick
I feel so stupid now.

lol, it happens