Hi all -

  I'm guessing this is a known issue but it has been driving me nutty recently. Is it true that Internet Explorer 8 (and perhaps earlier vers?) handles the :active pseudo class differently than FF, Chrome, etc?

I've noticed that when you assign a style to ":active", that style gets "stuck" in IE... so, say you assign all active links a background color of green... when you click a link in FF, Chrome, etc, you see a quick flash of green (green on the mouse's click down, back to default on mouse's click up)... while in IE, you see the link change to green and then stay green.

Make sense?

Here's my sample code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<title>SC Tools</title>
<style media="all" type="text/css"">
    a.btns {
        float: left;
        display: block;
        height: 30px;
        line-height: 29px;
        padding: 0px 10px 0px 10px;
        margin-left:5px;
        margin-bottom: 5px;
        border: solid 1px red;
        text-decoration: none;
        color: red;
        font-weight: bold;
        text-decoration: none;
        text-align: left;
    }
    a.btns:hover {
        border: solid 1px #0066CC;
        color: #0066CC;
    }
    a.btns:active {
      position: relative;
      top: 1px;
    }
</style>

TEST LINK


  • Ah... weirdness with the code block display... the link html is "<a href="#" class="btns">TEST LINK</a>" Matthew Mirande about 4 years ago
  • Bonus: Is there a non-js work-around? Matthew Mirande about 4 years ago
  • Bonus Bonus: Can you point me to any documentation around events and :active state interactions (IOW, if I assign an "onmousedown" event, what happens to my ":active" state?) Matthew Mirande about 4 years ago

3 answers

Doug 1095
2
points

The :active pseudo-class applies while a link is being selected by the user.

CSS1 was a little ambiguous on this behavior: "An 'active' link is one that is currently being selected (e.g. by a mouse button press) by the reader." Also, in CSS1, :active was mutually exclusive from :link and :visited. (And there was no :hover pseudo-class.)

CSS2 changed things so that rules for :active can apply at the same time as :visited or :link. And the behavior was explained a little better: "The :active pseudo-class applies while an element is being activated by the user. For example, between the times the user presses the mouse button and releases it."

IMO, FF et al comply with CSS2 better than IE. But since a link is supposed to load a new page, IE could legitimately say the link is still "active" while the new page is loading, which is what happens.

You can see a similar counter-intuitive behavior in FF by clicking the link, but moving your mouse off of the link while holding the mouse-button down. The link is not activated (a new page is not loaded), but the link remains in the :active state. On the other hand, Chrome and Opera de-activate the link, but at different times; Chrome as soon as the mouse leaves the link area, Opera not till the mouse button is released. IE behaves the same as FF in this example. (Hit enter after dragging your mouse off the link, and you will see more differences in behavior.)

I would not call any of these differences "bugs", because of ambiguities in the spec.

The only work-around I can offer is to accept that you can't control every aspect of browser behavior. Users of different browsers have differing expectations of behavior, and if you start messing with user expectation, you're on the wrong path.

Answered about 4 years ago by Doug
  • BTW, I like how the question title rhymes. :-) Doug about 4 years ago
  • Thanks Doug! Matthew Mirande about 4 years ago
BPartch 342
0
points

I had never heard of this before but just tested and do not see any issue with this in IE8.

Answered about 4 years ago by BPartch
  • Interesting... thanks for checking it out! Perhaps my example code was a bit lame... try this: Go here: http://maxvoltar.com Click on "Homepage" in the right-hand nav column. This link should "bounce" (1px down on :active) when clicked. For me, the effect works in FF & Chrome but not in IE. Matthew Mirande about 4 years ago
0
points

If I'm understanding correctly, I think I remember seeing this happen in IE6 but it wasn't a bug or anything misbehaving. The :active color would sometimes (or maybe always... its been a while) stick after clicking a link but it would revert back to the normal link color once you click anywhere else on the page.

Answered about 4 years ago by Matt Milburn
  • yep!... it sticks until you click elsewhere on the page... or at least it does for me using IE8. Everyone else (Chrome, FF, etc) seems to treat :active properly (IOW, only invoke the active state on mouse click down) Matthew Mirande about 4 years ago