Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    Regular Coder
    Join Date
    Aug 2011
    Posts
    192
    Thanks
    112
    Thanked 0 Times in 0 Posts

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

    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>

  • #2
    New Coder
    Join Date
    Dec 2006
    Posts
    42
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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;}

  • #3
    New Coder
    Join Date
    Sep 2011
    Location
    England
    Posts
    39
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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>
    Last edited by Dom Mv; 11-26-2011 at 04:57 PM.

  • #4
    New Coder
    Join Date
    Dec 2006
    Posts
    42
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Dom Mv View Post
    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.

  • #5
    New Coder
    Join Date
    Sep 2011
    Location
    England
    Posts
    39
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by aspekt9 View Post
    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.
    Last edited by Dom Mv; 11-26-2011 at 05:03 PM.

  • #6
    Regular Coder
    Join Date
    Aug 2011
    Posts
    192
    Thanks
    112
    Thanked 0 Times in 0 Posts
    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>

  • #7
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    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."
    Last edited by Sammy12; 11-26-2011 at 06:30 PM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •