<a> tags not clickable in Internet Explorer 7 - why?

Question

I've got myself multiple a tags floating on a page.

They have been styled in a unique way to center an image horizontally inside it, using a span and css. The a tag itself has fixed width and height.

I thought this was basic stuff, and my theme was causing the issue, but I've created a stripped down jsFiddle and I'm still getting the same problem when running the jsFiddle in IE 7.

The a tags are all click-able in every browser apart from IE7, why is this happening?

Can anyone explain? Thanks.

http://jsfiddle.net/motocomdigital/Qk9tu/6/ - Test click-able state in IE7, works fine everywhere else.

Don't worry about IE 6 - I'm not coding for this anymore.

Answer 1

You can achieve what you are trying to do with just CSS, but it requires a slightly different layout in your HTML and some extra CSS.

JSFiddle - http://jsfiddle.net/8E8um/2/

Note

In a.home-module I have added a transparent image. This is because IE7 will not assign an "empty" parameter (due to the negative text-indent) to the top level and would therefore still leave the link unclickable.

Answer 2

It's the spans inside the a that cause the trouble...

Answer 3

you should assign "#" to href attribute.

Try this: http://jsfiddle.net/Qk9tu/5/

Answer 4

On IE, a link element (<a></a>) with an empty attribute href doesn't display a link-cursor (hand).

Either put a # in your href attributes or add a cursor:pointer on a.home-module