CSS Links won't change color

They have: 105 posts

Joined: Mar 2006

Hi,

Please can someone help?

I have an external CSS file that works ok for eveything else on the web pages, but the a:link, a:visited etc don't seem to work for the links

I put them in the CSS file in the following way:

a:link {text-decoration: none; color: #FFFFFF;}
a:visited {text-decoration: none; color: #FFFFFF;}
a:active {text-decoration: none}
a:hover {text-decoration: underline; color: #red;}

I have tried the example below but don't seem to be able to get the links to change color.

a {
a:link {text-decoration: none; color: #FFFFFF;}
a:visited {text-decoration: none; color: #FFFFFF;}
a:active {text-decoration: none}
a:hover {text-decoration: underline; color: #red;}
}

greg's picture

He has: 1,581 posts

Joined: Nov 2005

If that's a direct copy and paste, you have a missing semi-colon at the end of a:active
and that would indeed break it, and perhaps other things too

He has: 629 posts

Joined: May 2007

The first example has correct syntax; the second has not. Depending on the browser you use, the order may be significant. Try putting the rule for :hover before the rule for :active and see if that works better.

You can see that the first set of rules are valid by visiting the W3 CSS validator page - just copy and paste your code into the input box and press the "check" button.

Cordially, David
--
delete from internet where user_agent="MSIE" and version < 8;

They have: 29 posts

Joined: Oct 2007

drew22299;225374 wrote: Hi,

Please can someone help?

I have an external CSS file that works ok for eveything else on the web pages, but the a:link, a:visited etc don't seem to work for the links

I put them in the CSS file in the following way:

a:link {text-decoration: none; color: #FFFFFF;}
a:visited {text-decoration: none; color: #FFFFFF;}
a:active {text-decoration: none}
a:hover {text-decoration: underline; color: #red;}

I have tried the example below but don't seem to be able to get the links to change color.

a {
a:link {text-decoration: none; color: #FFFFFF;}
a:visited {text-decoration: none; color: #FFFFFF;}
a:active {text-decoration: none}
a:hover {text-decoration: underline; color: #red;}
}

Before you declare CSS, check it on your WYSIWYG editor, like the one you have pasted, you lacked a semicolon where other declarations have not been called because it is shown that the CSS committed an error.

Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.