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:

HTML

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

CSS

a.clickme {
display:block;
position:absolute;
top:5px;
left:5px;
height:150px;
width:200px;
font-size:1px;
text-indent:-9999px;
}

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.

8 Comments

  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

Latest Tweet
  • @mariafrey Same here. It’s funny because we started an physical calendar w/ the kids this morning and I didn’t think about it until noon. :)
Somewhat Recent
The Whole Nine Yards