105582 - CSS :hover & :active do not function properly

Status: RESOLVED INVALID

(Core :: CSS Parsing and Computation, defect)

Description

[Jeff Thomas]

I am the webmaster of bluestars.org, and this problem has baffled me for some
time.  My HTML and CSS are set up so that text links are either navy or white to
begin with, turn red on hover and active, and remain navy or white after being
visited.  But, text links do not turn red on hover or active like they're
supposed to.  I have checked my HTML and CSS a thousand times; I've run it
through W3C's parsers a thousand times... they come up perfect.  What makes this
especially baffling is that *it used to work* and then it suddenly broke.  This
all happened over six months ago, and no builds since that time have fixed it. 
Another site I've authored, lazytiger.com, uses the same scheme (in fact I cut
and pasted significant portions of the stylesheet from there to bluestars.org)
and :hover and :active work just fine in Mozilla.

This may or may not be related, but IE does screwy things with the text links on
bluestars.org, too.  IE (on Windows) turns the links red like it's supposed to,
but after they've been visited, they won't turn red anymore.  This ALSO did not
used to happen.  From my limited use of Mac and other platforms, it does not work
properly on other OS or browsers, either.

This has been driving me crazy, because there is absolutely nothing wrong with
the HTML or CSS that I can find.  Sorry if Bugzilla perhaps isn't the best place
to inquire about this, but I don't know where else to turn.

Comment 1

[Jeff Thomas]

Attachment: bluestars.org stylesheet

Comment 2

[Christopher Hoess (gone)]

-> style system

Comment 3

[Boris Zbarsky [:bzbarsky]]

Your sheet has:

a:active { /* rules */ }
a:hover { /* rules */ }
a:link { /* rules */ }
a:visited { /* rules */ }

Now all of these selectors have the same specificity (all are one element and
one class).  So if more than one applies, the later ones override the earlier
ones.  Notice what this means.  If something is a:active and also a:link it
should get the colors of a:link (IE gets this wrong). If something is a:active
and also a:visited, then it should get the colors of a:visited (IE gets this right).

So the solution for you is to write the rules in the following order:

a:link { /* rules */ }
a:visited { /* rules */ }
a:hover { /* rules */ }
a:active { /* rules */ }

This way :link or :visited will usually apply and when :hover or :active are
relevant they will override :link and :visited because they are later in the
document.

Alternately, you could keep the rule order the same and do:

a:link:active, a:visited:active { /* rules */ }
a:link:hover, a:visited:hover { /* rules */ }
a:link { /* rules */ }
a:visited { /* rules */ }

to increase the specificity of the :hover and :active rules.

Marking invalid since the bug is in the CSS (logic error, not syntax error, so
the validator does not catch it...)

Comment 4

[David Baron :dbaron: (⌚️UTC-5, no longer working on Mozilla)]

Yep, see http://www.people.fas.harvard.edu/~dbaron/css/1999/09/links

Comment 5

[Sébastien Delahaye]

*** Bug 199829 has been marked as a duplicate of this bug. ***