Empty Anchor Tag is Not Clickable

From time to time, not often, but it happens - we here at SiteBoxPro get stumped with browser quirks. Something will work great in one browser, but totally fail in another. We don't necessarily promote one browser over another (Firefox rocks), but we do have to implement websites that work across the most common ones.

With that said, we had a situation that required the use of an empty anchor tag. In FireFox everything worked great, but in Internet Explorer (7.x) it was not clickable. We added a non-breaking space - still no go. After some Google searching we found the solution: add a transparent 1px gif as a background image. Odd right? But it worked like a champ. Here is the info we found:

"Say you have an anchor element that you've given display:block and some dimensions with no content or background image, in order to make a clickable area, but in Internet Explorer it's not clickable. In order to keep the anchor invisible you can add a transparent 1px background-image. Suddenly, Internet Explorer understands that this is a clickable element. "

Thanks to the folks at iBloomStudios! Great post guys - and we wanted to spread the word.

Here is our code:

.polBox {
display: block;
height: 60px;
width: 140px;
position: absolute;
left: 360px;
top: 176px;
background-image:url(/images/transPic.gif)
}

Here is our HTML

href="http://www.siteboxpro.com" target="_blank" class="polBox"