Invisible Link Box for IE (works fine in FF!)

[theshib]

I'm trying to create an invisible box over a background image (sort of like an image map I guess)and make it a link. It works awesome in firefox but, of course, IE confuses the heck out of me. It only works when I have a background color set in the CSS.

Here's the snippets of code:

The CSS:

div.rss a {
position: absolute;
width: 246px;
height: 80px;
top: 20px;
left: 10px;
text-decoration: none;
}

The HTML:

<div class="rss">
<a href="http://twitter.com/statuses/friends_timeline/3601051.rss" title="RSS Feed!"><h2 style="display:none;">RSS</h2></a>
</div>

The div is not nested in anything else. If I add background:#whatever; to my css, the box will work in IE.

Anyone know what's going on?

[swa66]

First of all that HTML is invalid: h2 isn't allowed inside an anchor.
Invalid HTML: unpredictable results.

Next try adding something (even a &nbsp;) that does get displayed inside the anchor. It I remember correctly, some versions of IE won't render at all without there being any content to render.

Having hidden title tags as a SEO technique: don't get caught with cloaking (I see that e.g. GoogleBot starts to download my CSS files).

[theshib]

Thanks for the reply. I axed out the h2 (didn't know that was invalid) and tried just putting a &nbsp;

I've looked into the "display:none;" thing with crawlers. They won't frown upon it because if anything it helps with accessibility. Data is nicely organized for most users but is available to everyone even if javascript is turned off and screen readers are used. As long as yer not hiding huge chunks of text with no way of seeing it.

I still do not have a box that is a link in IE using your suggested method. What boggles my mind is that when adding a background:#fff;, the box shows up and works great! Too bad I don't want to be able to see it!

Anymore help or tips would be awesome. Thanks for what you've given so far!

[theshib]

My solution (because I'm tired of this problem)

I don't know why the invisible box only worked when there was background so I created a 2px x 2px transparent gif and made it the background of div.rss a.

it's working great now. I hate IE :D

[Xapti]

I dunno... something just sounds fishy about that... I really think it would work unless something is is causing a problem.

For instance, make sure you have a proper doctype. Also I think you may need to set a as display: block, since by default they aren't.

[edited by: Xapti at 8:21 am (utc) on May 18, 2008]