Why can't I change "link" color of URL link?

Buffmin · 11-26-2011, 03:26 PM

Hello all. I need some help. I seem to be able to set the link & hover colors for an "email" link, but no matter what I do, it does not work for a URL link! NOTE: The hover state changes correctly, but the normal state will always be purple if it is a URL link. Can someone please show me what I am doing wrong? here is my code. Thank you in advance, Buffmin.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  
<style type="text/css">

A.emaillink:link{color:#ff0000;}
A.emaillink:hover{color:#0000ff;}

A.weblink:link {color:#ff0000;}
A.weblink:hover{color:#0000ff;}  

</style>
</head>

<body> 

<p><A class='emaillink' href=mailto:c.jeffery@verizon.net>email</A></p>
<p><A class='weblink'href="http://www.yahoo.com">yahoo</A></p>

</body>
</html>

aspekt9 · 11-26-2011, 03:30 PM

I'm guessing it's probably because you've already visited the link. Links that have already been clicked and visited are turned purple by default unless you override it using css. If you want the link to stay red even after the user has clicked it add this to your css:

Code:

A.weblink:visited{color:#ff0000;}

Dom Mv · 11-26-2011, 03:52 PM

The reason why the colour for that particular link is refusing to change is due to a hidden style that Yahoo apply to all of their links. The simplest way to change this is to remove the 'http://www.' out of the address, and leave it as 'yahoo.com'.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  
<style type="text/css">

A.emaillink:link{color:#ff0000;}
A.emaillink:hover{color:#0000ff;}

A.weblink:link {color:#ff0000;}
A.weblink:hover{color:#0000ff;}  

</style>
</head>

<body> 

<p><A class='emaillink' href=mailto:c.jeffery@verizon.net>email</A></p>
<p><A class='weblink'href="yahoo.com">yahoo</A></p>

</body>
</html>

aspekt9 · 11-26-2011, 03:57 PM

Quote:

Originally Posted by Dom Mv

The real reason why the colour for that particular link is refusing to change is due to a hidden style that Yahoo apply to all of their links. The simplest way to change this is to remove the 'http://www.' out of the address, and leave it as 'yahoo.com'.

...

What....? This makes absolutely no sense... why would any styling that "Yahoo" applies affect his website....? I'm sorry, but you couldn't be more wrong.

Dom Mv · 11-26-2011, 04:00 PM

Quote:

Originally Posted by aspekt9

What....? This makes absolutely no sense... why would any styling that "Yahoo" applies affect his website....? I'm sorry, but you couldn't be more wrong.

I did some research and that's what came back. It seems that changing the link works, so I can't see why not. Yahoo wasn't in my history, so it wasn't a problem with the 'visited' link.

Note:
I am not referring to the styling on their site, but rather something that has been put in place for all Yahoo links across the web.

Buffmin · 11-26-2011, 04:36 PM

Here we go guys.... Thank you for all of your help and it sure was a wierd one, but I figured it out.

It turns out that you aparrently have to assign all 4 states (link, visited, hover and active), AND..... they have to be used IN THAT ORDER. I read it in a manual that I have. The manual said that if you don't use them in that order, that not all browsers will use them the same, and it was right! Example, if not in that particular order, when you back arrow from a URL, your link will no longer switch states when you hover it. In the correct LVHA order it works perfect! I have been on this for 2 hours! Thank you all and hope this helped clear it up. Sincerely Buffmin

I have included my code that works:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml">
<head>  
<style type="text/css">

a.emaillink:link{color:#009a31;}
a.emaillink:visited{color:#009a31;}
a.emaillink:hover{color:#5DC074;}
a.emaillink:active{color:#5DC074;}

a.weblink:link {color:#004f7d;}
a.weblink:visited {color:#004f7d;}
a.weblink:hover{color:#33A7FF;}
a.weblink:active{color:#33A7FF;}

</style>
</head>
<body> 

<p><a class='emaillink' href=mailto:myemail@verizon.net>email</a></p>
<p><a class='weblink' href="http://yahoo.com">yahoo</a></p>

</body>
</html>

Sammy12 · 11-26-2011, 05:21 PM

ahh
selectors for links

"Note that the A:hover must be placed after the A:link and A:visited rules, since otherwise the cascading rules will hide the 'color' property of the A:hover rule. Similarly, because A:active is placed after A:hover, the active color (lime) will apply when the user both activates and hovers over the A element."