My banana peel is the {margin; 20px 0 0 20px;}
To get the show 100%, you need to follow the rule “LoVeHAte”, just in this order:
a:[B]l[/B]ink {...}
a:[B]v[/B]isited {...}
a:[B]h[/B]over {...}
a:[B]a[/B]ctive {...}
Otherwise the hover state will overrule the active-state.
And better is to follow: “LoVe, (s)He FAked” , with also the focus state mentioned: (*)
a:[B]l[/B]ink {...}
a:[B]v[/B]isited {...}
a:[B]h[/B]over,
a:[B]f[/B]ocus {...}
a:[B]a[/B]ctive {...}
This is for accessibility ([U]see guideline[/U]): now no-mouse-using vistitors, who use the Tab-key to find the links in the page, can also see where they are by the “hover-change” (without mouse you cannot see a hover!).
In your case, it could be in a short notation:
a { /* in general, so also for a:link */
font-size: 16px;
color: #404040;
text-decoration: none;
}
a:visited {
color: green;
}
a:hover,
a:focus {
color: red;
text-decoration: underline; /* exception */
}
a:active { /* at mousedown */
text-decoration: none; /* overruling the hover/focus */
background-color: yellow;
}
a.underline {
text-decoration: underline;
}
Attention: there are browser differences in the interpretation of the visited/active/focus state!
- IE7 after coming back: the green text + yellow background is showed, without underline (= visited + active state).
- FF, IE10 and Opera after coming back: the red text + normal background is showed, with underline (= hover/focus state).
- Safari-Win: the same, but as soon as you move the mouse, the green text + normal background is showed, without underline (= visited).
- Chrome after coming back: the green text + normal background is showed, without underline (= visited).
- All browsers: after a click somewhere else in the page (losing focus/active state), the visited state is showed (= green text + normal background + no underline in the first line).
Not too much!
But I guess that most visitors know which links they have clicked before, and don’t have to be remembered by a special “visited” state.
- So to avoid confusion, I usually omit the visited and active state: just the a {…} and the a:hover, a:focus {…} will be enough.
Some other remarks about accessibility:
- The [U]guideline 1.4.1 says[/U] (in other words): “A link must be clearly distinguishable from normal text, not in different color alone”. - Links without underline can be invisible for people with colorblindness or diminished color contrast power!
- Note: this forum does not underline links, and they are difficult to see by their color difference (sometimes I don’t notify a link…). Brrr! - ([U]See this topic[/U]!)
(exception: in my posts I underline the links by hand)
- For Tab-visitors the outline dots are very important. They cannot be removed just for the sake of the design beauty.
See this site: [U]www.outlinenone.com[/U]
(*) The mnemonic is an invention of Goeroeboeroe, last post in [U]this forum topic[/U].