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.
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.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 believeOk, 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.
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.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.
Originally posted by Jick
I feel so stupid now.
lol, it happens
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.
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.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 believeOk, 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.
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.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.
Originally posted by Jick I feel so stupid now.
lol, it happens