CSS text-shadow navigation problem

Question

I'm trying to make a pseudo link class with the CSS3 text-shadow for both navigation and normal use of links.

The problem is that the state "a:hover" is overruling "a:visited" so when doing a mouseover on the link that previously has been visited, it outputs different that it should.

If the a:visited state isn't present in the CSS the color of the visited links will turn into the standard purple color, which I don't like it to.

Have a look at the site: www.sayhi.dk

The code looks like this:

HTML

<a class="lnk" href="http://www.twitter.com/sayhidk"&gt;@Sayhi.dk&lt;/a&gt;

CSS

a.lnk:link {
font-size: 12px;
font-weight: bold;
font-family: Myriad Pro;
text-shadow:1px 1px #ffffff;
color:#7c7565;
text-decoration:none;
}

a.lnk:hover {
    font-size: 12px;
    font-weight: bold;
    font-family: Myriad Pro;
    text-shadow: 1px 1px #7c7565;
    color:#ffffff;
}

a.lnk:visited {
    font-size: 12px;
    font-weight: bold;
    font-family: Myriad Pro;
    text-shadow:#ffffff 1px 1px 1px;
    color:#7c7565;
    text-decoration:none;
}

a.lnk:active {
    font-size: 12px;
    font-weight: bold;
    font-family: Myriad Pro;
    text-shadow:1px 1px #ffffff;
    color:#7c7565;
    text-decoration:none;
}

Hope that you guys can help me out.

Answer 1

In your example, specifying 'color' in the :visited style is sufficient.

Edit: the solution was to put a.lnk:visited before a.lnk:hover.

Answer 2

This may or may not help, but I never define a:link styles. I instead define an "a" style (no pseudo class), and styles get inherited nicely. Then I define :hover, :active, etc... And if I do not define one for a particular style, the catch-all "a" style gets applied.

It is also good practice to define a :hover as well as a :focus. They can be the same style if you like. The :focus is used in a limited way by the iOS and handicapped users who don't use a mouse but use a keyboard to navigate.