16

I have some link styles for our website and the CSS is as follows:

a:link {
    font-family: Verdana, Tahoma, Geneva, sans-serif;
    text-decoration: none;
    color: #0676b3;
}

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

a:hover {
    color: #fff;
    background: #A5C2DB;
    border-radius: .1875em;
    padding: 0 .1875em;
}

Here is a jsfiddle to show how they are supposed to look in their different states:

a {
  display: inline-block;
  margin: 10px;
}
/*  these styles are for presentation of the link states they are NOT the styles in my stylesheet*/

a.link {
  font-family: Verdana, Tahoma, Geneva, sans-serif;
  font-size: .875em;
  text-decoration: none;
  color: #0676b3;
}
a.visited {
  color: #666;
  text-decoration: underline;
}
a.hover {
  color: #fff;
  background: #A5C2DB;
  border-radius: 0.1875em;
  padding: 0 0.1875em;
}
<a class="link">Regular Link</a>
<br />
<a class="visited">Visited Link</a>
<br />
<a class="hover">Hovered Link</a>

:link = blue text no decoration

:visited = grey text underlined

:hover = white text with light blue background

The :link and :hover work fine but for some reason the :visited state refuses to show the underline. in Chrome and Firefox using firebug or the inspector I can see the :visited style in action and the text is grey in color, only it refuses the underline state.

Any ideas on what I'm doing wrong?

misterManSam
  • 24,303
  • 11
  • 69
  • 89
Danferth
  • 1,841
  • 5
  • 19
  • 25
  • its working perfect for me. at least the supposed to look like states. – John Riselvato Apr 25 '12 at 17:01
  • 1
    Your fiddle only shows what the styles are supposed to look like, but we need to see your actual code. – BoltClock Apr 25 '12 at 17:02
  • @BoltClock'saUnicorn the actual css is in the question above, the fiddle was only to show the state desired. As far as the HTML it is just the link tags nothing there that would affect it so did not include. – Danferth Apr 25 '12 at 17:07
  • I added some dummy links to his fiddle (http://jsfiddle.net/xmewM/9/). By adding and removing the `decoration:none;` property, I was able to prove that the `a:link` declaration is indeed overriding the `a:visited` underline property, even though Chrome inspector says otherwise... – Nathan Arthur Apr 25 '12 at 17:07
  • @gmeben that question is about `:visited` links but mine is about a problem with the css not the application of the `:visited` selector. – Danferth Apr 25 '12 at 17:11
  • @NathanArthur awesome I guess, so I'm not crazy in seeing it is being overridden. Any ideas on a fix. I never until now used `:visited` so this is quite frustrating. – Danferth Apr 25 '12 at 17:13

1 Answers1

17

You're not doing anything wrong - it just doesn't work that way (anymore). Styling of :visited was used as a security hole, so browser manufacturers basically eliminated alternate styling for :visited except for a handful of properties (e.g. 'color', 'background-color')

See: http://hacks.mozilla.org/2010/03/privacy-related-changes-coming-to-css-vistited/

chipcullen
  • 6,840
  • 1
  • 21
  • 17