Anchor Pseudo-classe :visited behaves inconsistently across browsers

[Violet_82]

Hi all, I'd like to clarify something here please, the inconsistent behaviour of browsers with regards to the pseudo class :visited. I had done quite a lot of research into it ont he web and it seems to me that every browser does something different. I appreciate this has a lot to do with security but in some instances it seems a bit awkward. Let me give you a few examples. I am working on a website at the moment, which is optimized to display in mobile browsers too. If I leave the defaults pseudo classes (meaning I don't change them at all and leave the defaul colour for links) I noticed that every browser seems to work fine, in that an unvisited link is blue and turns purple when visited. But, the moment I change those properties (and change them in the correct order of course) things go bananas. Take this fragment of code:

/*STYLED LINKS*/
a.myLink:link{
    color:#c73085;
}
a.myLink:visited{
    color:#08dff0;
}
a.myLink:hover{
    color:#080808;
}
a.myLink:active{
    color:#c73085;
} 
/*STYLED LINKS*/

When this is applied to my css, only firefox, IE and opera seems to fully support it.The colour of the links changes ok the problem is only with visited links. Safari and Chrome behave in a very interesting way: if I click on the link, the colour doesn't change to visited and stays the same, but when I hover with the mouse on the clicked link, it changes to the right, visited colour. Even if I change the above to
a.myLink:visited{color:#08dff0 !important;} I don't see much difference. Now, this is only for desktop browsers of course, mobile browsers are even worse.
The w3c are somewhat vague http://www.w3.org/TR/css3-selectors/#the-link-pseudo-classes-link-and-visited

"Note: It is possible for style sheet authors to abuse the :link and :visited pseudo-classes to determine which sites a user has visited without the user's consent.
UAs may therefore treat all links as unvisited links, or implement other measures to preserve the user's privacy while rendering visited and unvisited links differently."

and I am not entirely sure how to interpret this because, as stated above, as long as you don't change the pseudo classes the visited/unvisited links colouring works ok, it's just when you change them that problems arise. I don't know whether I should waste more time trying to fix this behaviour or I should just forget about it. What do you guys think?

[LastMitch]

Anchor Pseudo-classe :visited behaves inconsistently across browsers

You have to provide a little more code than just the CSS ( another words what is connect to the div tags? )

Read this:

http://www.cssdog.com/css_pseudo_classes.html

or this:

http://reference.sitepoint.com/css/pseudoclasses

I am working on a website at the moment, which is optimized to display in mobile browsers too.

That one has to do with CSS3 not all CSS3 function well in certain browsers.

[Violet_82]

LastMitch, thanks for your reply. I haven't included any html simply because it is a general question, in that I can replicate the problem - or bug if you prefer - all the time. A normal list containing links will suffice

<div id="myDiv">
    <ul>
        <li><a href="#" class="myLink">ABC</li>
        <li><a href="#" class="myLink">DEF</li>
        <li><a href="#" class="myLink">GHI</li>
        <li><a href="#" class="myLink">JKL</li>
    </ul>
</div>

I have had a look at your links, but I have found quite a bit about this problem (other than the W3C explanation above):
http://apple.stackexchange.com/questions/40835/how-to-force-coloured-display-of-visited-links-in-safari-5
http://www.evotech.net/blog/2010/06/safari-5-link-selector-bug/
http://support.apple.com/kb/HT4196
So I concluded that it is a sort of bug...
thanks

[LastMitch]

I haven't included any html simply because it is a general question, in that I can replicate the problem - or bug if you prefer - all the time.

<div id="myDiv">
<ul>
<li><a href="#" class="myLink">ABC</li>
<li><a href="#" class="myLink">DEF</li>
<li><a href="#" class="myLink">GHI</li>
<li><a href="#" class="myLink">JKL</li>
</ul>
</div>

where is your close </a> tags?

It should look like this:

<div id="myDiv">
<ul>
<li><a href="#" class="myLink">ABC</a></li>
<li><a href="#" class="myLink">DEF</a></li>
<li><a href="#" class="myLink">GHI</a></li>
<li><a href="#" class="myLink">JKL</a></li>
</ul>
</div>

Did you ran the code without the </a> tags and did it work?

[IIM]

I have checked a:visited in IE9,mozilla and chrome.It is working fine in all three.I am not sure what are you talking about

<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<style>

a:visited {text-decoration:underline;
color:#ff0000;} /* visited link */

</style>
</head>

<div id="myDiv">
    <ul>
        <li><a href="#" class="myLink">ABC</a></li>
        <li><a href="#" class="myLink">DEF</a></li>
        <li><a href="#" class="myLink">GHI</a></li>
        <li><a href="#" class="myLink">JKL</a></li>
    </ul>
</div>
</html>

Although i am not sure about safari.Actually the selector compatibility depends on browser.As you cann see that HTML5 many newly introduced elements,attributes are supported by latest versions of browser but still not completely.
http://html5test.com/results/desktop.html
Although this problem is not about html5 but i am quoting it to tell it depends on browser support.

[Violet_82]

@LastMitch, sorry I left out the a closing tag, typo.
@IIM, it is mainly safari, although I had problems with chrome too