Forum Moderators: not2easy
Here is a snippet of mode css code.
All works well except for the fact the the underline doesn't appear.
Please help
a {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF;
text-decoration: none;
font-weight: bold;
}
a:hover {
text-decoration: underline;
color: #FFFF33;
}
a:active {
color: #FFFF00;
}
a:visited {
text-decoration: none;
}
The links that are not being underlined are links you have already visited.
The dynamic pseudoclasses (:link, :visited, :hover, :action) all have the same specificity, meaning one does not have more weight or importance than the others. Therefor, their order in the css code is of critical importance. Where applicable, a pseudoclass that comes AFTER another pseudoclass will override the first with it's styles.
In your code, the a:visited comes after the a:hover. This means that for visited links, styles in the :visited pseudoclass will override styles in the :hover pseudoclass, even when that link is being hovered (because the link is BOTH hovered AND visited, so both apply, and the later :visited overrides the earlier :hover because they have the same specificity...make sense?).
Since your :visited selector styles the text-decoration away, hovering visited links gives no underline.
The solution is to be very careful about what order you use the dynamic pseudoclasses in. A good rule of thumb is the mneumonic: LoVe/HAte.
L-ink
V-isited
H-over
A-ctive
Note that is not necessary to use all four, but it IS necessary to put those that you use in the right order.
It's also worth noting that in your code you don't need to specify text-decoration:none for the visited links, since it is already set in the general <a> styles. The pseudoclasses will ADD styling to your <a>nchors, but anything set in the <a> selector will persist through the pseudoclass states unless explicitly overridden.
cEM
Do I even need to put visited, if all I want visited to do is just leave the link looking like a normal link?
Cheers again
Do I even need to put visited, if all I want visited to do is just leave the link looking like a normal link?
No. If you're not making :visited do anything special, it isn't strictly necessary. However, to be on the safe side, I always use the following code when I want regular links and visited links to behave the same:
a:link, a:visited{
property:value;
}
a:link:hover, a:visited:hover{
property:value;
}
This ensures that all links, visited or not, behave the same on the page. This assumes, of course, that you are not using :active styles on the page.
Glad your first experience with us was a good one. :)
cEM
