Unclickable Links in IE

As with most trades, there are some tricks about web design that you only learn through experience. Building complex layouts that avoid browser-specific hacks is certainly one of those tricks. Yes, there are some hard and fast rules you can teach new designers – like how IE version 6 and below screw up the box model – but there are some pitfalls that will just drive you batty until you’ve expended countless, agonizing hours muttering under your breath as you write and re-write your CSS.

I’ve been there, done that, and built out enough standards-based designs to diagnose (and/or avoid) just about any rendering anomaly. As useful as that skill is though, I still occasionally find bugs that leave me completely bewildered. Last week for instance, I had the same mind-melting problem pop up on two different sites. While the individual cases were very different, the common denominator was that they were absolutely-positioned links that weren’t clickable or hoverable in any version of IE. I didn’t write the code in question on either of these sites, but there was nothing wrong with it. Here’s a quick example:


<a class="clickme" href="#">Why can't you click me? :(</a>


a.clickme {

If I were doing something like the above example, I would typically put a background image in the link because, well, that’s what text-replacement is all about. This particular link was placed over an image with a clickable area and therefore needed to be transparent. No problem in Firefox, Safari, or Opera…but when I checked the site in IE, the link wasn’t working.

In troubleshooting the issue, I put a border around the link and there it was in the right position with the right dimensions. Next, I added a background to the hover state and attempted to hover the link area with the mouse. Nothing happened, so I added a background-color to the non-hover state and it worked fine. I took the background-color off and it was broken again. Of course, the block needed to be transparent so at this point i was getting irritated. That’s when an idea came to me that I’m sure I’ll catch a lot of flack for: that’s right, I used a spacer gif.

I can think of several ways to avoid doing the link this way, but given the constraints of it having to be a transparent, absolutely positioned link, this seems like a good solution. Please check out the demo in IE and let me know if I’m crazy (you probably already knew that) and what you might do differently.


  1. Heh, strange one.

    Looks like you can just use “background:url(#);” on the link in question. That’ll save you 43 bytes 🙂 … But, it’s probably a safer bet to just use the spacer gif.

  2. Didn’t think of that, Ken.
    And # as the URL of a background validates.

  3. That’s it. I’m going back to using tables and spacer gifs.

    Long live DOS 5.0!

    (Just kidding.)

  4. Weird.. did some quick debugging.. nothing.
    I doubt you found a new IE6 bug though.. someone must have written something about this.

  5. @Paul – That’s it! I’m going back to designing ANSI graphics. 🙂

    @Ove – Of course, and it’s kind of an obscure/irrelevant bug for most folks. I just didn’t find anything in my limited searching so I thought I’d put it out here. I was actually kinda hoping someone would come along and say: “Oh, I’ve seen that a million times. Here’d my blog post from 5 years ago on it.” No luck yet.

  6. Jason, I’m sure you probably have your reasons for using the methods demonstrated in the example. Using relative positioning and a bit of floating could achieve the same effect and works in IE6 & IE7: http://cdharrison.com/sandbox/absolutelinks/

  7. That’s a good workaround for the example, Chris. Unfortunately though, in both of the sites I was working on, the link really needed to be absolutely positioned. It had to be out of the flow of the layout and on top of another object.

  8. I stumbled across this once and ended up fixing it by keeping the background color, but setting “opacity: .0; filter: alpha(opacity=00);” on the tag. It might be a bit invalid, but no spacer gif was needed.

Leave a Comment