A while back when I was working on developing the jQuery popout tutorials, I ran across a significant and annoying bug in Internet Explorer 6 and 7. Specifically, Internet Explorer does not respect the height and width properties of block-level, absolutely positioned anchor tags if they contain no content (or if that content has been moved or removed).
Instead of your anchors being the size you’ve specified, the size of the clickable area is limited to the size of the content inside the anchor. And therefore, if your anchor is “empty” (either because it’s an empty anchor tag, or you’ve used “display: none” or a negative margin to hide the content), your anchor tag’s clickable area is zero!
Let me explain a bit of what I mean. Let’s say I have a website with a very stylized banner at the top of the page, and I’ve decided to load the banner as a background image. However, in order to play nice with search engines and keep my SEO high, I’m still going to use an <h1> tag for my banner text, and then just hide its content. I also want a portion of my banner to be clickable, so I can let users get back to my homepage that way.
So let’s say this is my banner image:
As you can see, the banner contains some fancy text, and I want that fancy text to act like a regular hyperlink and take people back to the front page.
I might write some XHTML that looks like this:
<h1><a href="/"><span>This Is My Website</span></a></h1>
And some CSS to show the banner, make a portion clickable, and hide the text:
h1 {
width: 800px;
height: 200px;
background: #fff url(mybanner.jpg) no-repeat; }
h1 a {
position: absolute;
top: 25px; // Move the anchor above the clickable area.
left: 50px;
display: block;
width: 700px;
height: 125px; }
h1 a span {
display: none; }
My background image is on my h1 tag, because it contains my full banner. I’ve then moved my anchor tag to sit right over the text in my image, and then hidden the text inside of the anchor tag so as not to distract from my lovely artistry. The result could be conceived thusly:
So my clickable area is sitting directly over my image’s text, effectively turning it into a hyperlink. So we should be good, right? Well, in all browsers but Internet Explorer, we are. Unfortunately, because of the bug mentioned above, the anchor in IE has a clickable area of zero – my link might as well not even be there.
So what’s the workaround? Well, there are several.
Apply a Border
If, somehow, a border around your otherwise “invisible” anchor tag works well for your design, then rejoice! Your work is nearly done. Setting a border on the anchor tag forces Internet Explorer to recognize the width and height of the anchor, thereby giving it clickable area again. This fix was discovered while trying to debug the problem: adding a border to find out where the anchor was sitting on the page made it magically show up again. Go figure. So if you’re able to use a border (and perhaps chose a border color that blends into your background image?), this is the easiest fix of the bunch.
Put an Image In the Anchor
Another option is to simply not try to hide the contents of your anchor at all. If you simply put the image you’re trying to overlap into the anchor tag itself, you can bypass this whole messy affair:
<h1><a href="/"><img src="mybanner-text.jpg" /></a></h1>
Of course, that defeats the purpose of having a nice big <h1> tag at the top of your page for the search engines to find. As a result, this is my least favorite solution of the bunch.
Use a Background Image
While debugging, I also discovered that using a background color on the anchor tag forced IE to notice the width and height of the anchor. Of course, that also obscured the text to which I was trying to link and obliterated my hopes for an invisible link. However, it turns out that background images also force IE to recognize the size of the anchor.
At first, I figured the best solution would be to simply slice up my banner and attach the clickable portion of the image as a background on my anchor:
h1 a {
background-image: url(mybanner-slice.jpg); }
And that solution is inelegant, but effective. But then I discovered that a transparent image works just as well! So then I created a 1px by 1px transparent gif and used that as my background instead:
h1 a {
background-image: url(transparent.gif); }
So even if the background color is transparent to human eyes, Internet Explorer can see and recognize the image as being present and thus will respect our height and width. In fact (and this gets a little strange), the image doesn’t technically even have to exist for this technique to work! If I tell IE that there’s a background image, but it can’t find the background image, it’ll still find our anchor size:
h1 a {
background-image: url(fake_image.gif); }
Now, I realize that this Internet Explorer bug only happens in a very specific use-case (absolutely positioned, empty anchors), but I’ve stumbled across it more than once in my work, so hopefully someone out there will find this workaround useful as well! Also, I should point out that none of these workarounds have any negative effect in any non-IE browsers, so go nuts!