A workaround for using the :active pseudo-class with anchors in IE7

NOTE: This post is intended for developers frustrated with IE7′s lack of support for the :active pseudo-class. The information contained within has been noted in other articles, such as Jeff Starr’s Unobtrusive JavaScript: 5 Ways to Remove Unwanted Focus Outlines or Oscar Alexander’s How to Make Sexy Buttons with CSS, but I don’t think I’ve seen a post solely dedicated to this specific issue, so I figured I’d take the time to create one.

The Background

A little while ago, I set out to create a couple of image buttons. I wanted something that was reusable and had the potential to be used with ASP.NET with the least possible extra work/maintenance. I liked the design concept that the guys over at Wufoo have been using and decided to see if I could code something that would emulate that look and feel, particularly in regards to the way they used the :hover and :active pseudo-classes to add a touch of interaction.

So here’s an example of what I came up with:



Here’s what that button looks like when the mouse is hovering over it (:hover):



And here’s what it looks like when the user clicks on it:



None of this is groundbreaking or terribly fancy, but it does the job nicely.

The Problem

The problem I noticed is that, in IE7, the :active pseudo-class seems to behave more like the :focus pseudo-class. That is, the CSS instructions provided in the :active pseudo-class should be presented only for the duration of the mouse click, but instead persist for as long as the anchor element has focus (focus is given to the anchor onclick). This may not be a problem in every scenario, particularly if clicking on the button results in a refresh or a redirect to another page. If the button in question is to be reused between page refreshes, however, then your users may end up wondering if it’s safe to continue when the button has not returned to its original state. In any case, it mildly degrades the user experience and, as such, it probably should be addressed.

The workaround I employed is quite simple. To each anchor tag, I added an onclick handler roughly equivalent to the following:

Link Text

That seemed to fix the problem. It also gave the added bonus in some browsers of eliminating the dotted border indicative of focus that appears post-click (but that may not be news to most people).

In case you were paying attention in the beginning of my post, you may recall that one of my goals was to create a solution that could be easily reused in ASP.NET. To do that, I’d simply use the LinkButton control in a manner similar to the following:



View Report


From there, I’d probably just use some unobtrusive JavaScript to wire up the onclick event of the generated links to perform the “blur” functionality as specified above.

I’m sure a User Control could be created for even swifter and more concise ASP.NET implementation, but I haven’t taken the time to do that yet. If I do, I’ll be sure to share it here.

If you need some additional guidance on making stylish image buttons with anchor tags and CSS, I’d recommend reading the aforementioned article, How to Make Sexy Buttons with CSS, by Oscar Alexander.

Let me know if you’d like me to post the CSS/XHTML code for this example.

Comments and suggestions are always appreciated.

-Patrick


reference : http://patrickgates.wordpress.com/2009/02/04/a-workaround-for-using-the-active-pseudo-class-with-anchors-in-ie7/