Hi

 

I am having endless trouble setting the a tags link, visited, hover and active styles. Here is my code:

 

a:link {

color: black;

}

a:visited{

color: blue;

}

a:hover{

text-decoration: underline;

}

a:active{

color: green;

}

 

In both firefox and safari the a:link is totally ignored and the a:visited is overriding everything else. I have tested them in all possible combinations and I can't get it working. Is this an issue in these browsers or am I overlooking something. By the way I have no other code for the a tag in my css or in my html.

 

Please help

Felicia

do you actually have a link in your code ?

 

<a href=""></a><!-- no link-->
<a href="#"></a><!--link-->

and a link to the page would be most helpful

..and don't forget a:focus

a:pocus

There's nothing wrong with that code. Have you saved the styles and got a correct path to the stylesheet? It will apply to all links. If you want them to apply only in some places, add a class to them or to the container and code the styles with the class in the stylesheet.

http://www.wickham43.net/specialeffects.php#linkcolors

 

You may never see the link state yourself because I expect you have visited the page in the link many times, so the visited state will apply. However, the hover and active states should also apply. The order is important and you have used the most popular order. Link applies until someone has visited the page in the link, but hover is coded after visited so that hover will not be over-ridden by visited. Active is usually last. Focus is optional (essential if you have disabled outline which is useful to disabled people and so focus is necessary for them).

Edited January 21, 201115 yr by Wickham

Hi

 

Thanks all for the response and tips.

I have got real links in the code now, it seems to be working in safari (but if I visit a link it changes all the links to the visited state, does this mean I have to apply this code to each link seperately with an id?),

 

Firefox is still the same. Even after deleting history, and changing colors to see that it really has refreshed the page. a:link remains ignored and a:visited overrides the rest. a:hover works fine and a:active works fine.

 

Thankyou

Felicia

Are you using anchor tags for example

<a name="top"></a>

or are you using just links to different pages?

 

You might have to set seperate classes per link if your using anchor tags.

please, please, please just simply upload it and post a url so we can look too instead of wasting time second guessing what it might be.

 

please.

 

did i say please already?

Why not using the codes like this:

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

a:hover{
color: blue;
text-decoration: underline;
}

url, url, url ...

Specifying the default colour

 

If you want to specify the default colors which will be used in a web page you should use the following code. These colors will be applied to all links in the document.

 

<style type="text/css">

<!--

a:link {color: #000000; text-decoration: underline; }

a:active {color: #0000ff; text-decoration: underline; }

a:visited {color: #008000; text-decoration: underline; }

a:hover {color: #ff0000; text-decoration: none; }

-->

</style>

 

Specifying different colors for different links

 

<a href="blue.htm" class="blue">Blue Bold Link</a>

<a href="red.htm" class="red">Red Italic Links</a>

 

Our css for these links would be in this form: (note: blue=#0000ff, red=#ff0000)

 

<style type="text/css">

<!--

a.blue:link {color: #0000ff; background: #ffffff; font-weight: bold;}

a.blue:active {color: #0000ff; background: #ffffff; font-weight: bold;}

a.blue:visited {color: #0000ff; background: #ffffff; font-weight: bold;}

a.blue:hover {color: #0000ff; background: #ffffff; font-weight: bolder;}

 

a.red:link {color: #ff0000; background: #ffffff; font-style: italic;}

a.red:active {color: #ff0000; background: #ffffff; font-style: italic;}

a.red:visited {color: #ff0000; background: #ffffff; font-style: italic;}

a.red:hover {color: #ff0000; background: #ffffff; font-style: normal;}

-->

</style>

 

You can have any number of link styles on a page once you assign each one a class and specify the styles for each class. Effective use of "hover" can add a lot to a web page. Experiment!

 

Might these Would helps You!

 

[link removed]

Edited January 22, 201115 yr by Wickham

you can offer all the advice you want but let's see the god damn page and then we can see, specifically, where it's not working for the OP.

URL

All his links have been removed.

So I'm guessing a Mod/Admin has done it. Spam maybe?

Hi all

 

Well thanks for all the input, it is working fine now. Applied different classes for the links I wanted with different styles. The biggest problem was that I had already clicked on the link and the browser registered it as visited. I tried it with new html document just to see if I am doing it right now and all is fine. Man I feel like such a newbie, but I guess that is exactly what I am. In the future I will see to it that I upload the page for you guys, seems logical that it will make it easier to see whats gone wrong.

 

Thanks

Felicia