The Unescapable Link (CSS)

As I got the easy task of remaking (the old) the splash-page for the Norwegian Schoolnet (skolenettet.no) I discovered a bug in Firefox: if you use an image-replacement technique in a href, where that image-replacement class has an overflow of hidden, you can’t get away by pressing ESCAPE or dragging your pointer outside of the browser/away of the link. Check it out:

<a href="linktoapage.html" class="unescapable">Get out of this one! Haha!</a>

And then the CSS:

a.unescapable {
background: url(“someimage.gif”) 0 0 no-repeat white;
display: block;
width: 100 /* width of image */
height: 250 /* height of image */
text-indent: -9000px /* remove the text */
overflow: hidden; /* This makes it unescapeable in Firefox */
}

The href will be replace with the image, whereas the image will be clickable. But if you try to escape it – that means you click and hold down the mouse button then either press ESCAPE or drag the pointer outside of the browser/away from the link – you’ll see that you can’t. It’s just simply not possible to not start loading the link. I’ve tested it in IE6/7, Firefox 2.0 and Opera 8, and it’s only Firefox that produces this bug. Here’s some live examples to test on:

Without the overflow: hidden setting:
You can escape this link, as usual in Firefox.

Here’s with the overflow: hidden setting:
Can you escape this?

I’ll see if someone has posted this up on Bugzilla, or I’ll do it this weekend if I got the time.