Image is not clickable inside anchor only in IE7

Question

Html Structure

      
   
   
    Some text 
<         


        

Answer 1

From your post I think u wanted a clickable image with span info text !! I hope this will help u ;)

http://jsfiddle.net/ajinkyax/v5KH5/3/

<a href="http://www.google.com/" class="imgLink">
<img src="http://artax.karlin.mff.cuni.cz/~ttel5535/aviff/photos/scaled/P000137_220x148.jpg" />
<span>Info text about image</span> </a>

CSS:

.imgLink {display: block; width: 200px; text-align: center;}​

Answer 2

Just wrap anchor tag inside Div or Span. Its working in IE7.

This way is wrong..?

Answer 3

Have you tried using the HTML5 shim? It helps a lot with issues that are caused by hasLayout.

<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Answer 4

If you have something like:

<a name="link1" href="somelink.php">
<div class="somediv"><img src="image.jpg" class="somestyle"></div>
</a>

Simply add a style property to the anchor like this:

<a name="link1" href="somelink.php" style="display: block; overflow: hidden;">

This will make the div and everything inside of it clickable in IE7+ and firefox & chrome.

Answer 5

An easy way to do this is:

<p>
 <span><img></span>
 <span> Some text <span>
 <a></a>
<p>

p { display: block; width: 100px; height: 100px; position: relative; }
a { display: block; width: 100px; height: 100px; position: absolute; top: 0; left: 0; background: #fff; opacity: .0; filter: alpha(opacity=0); -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; }`

Answer 6

Just take out the SPAN from the IMG. The IMG element can be styled with a class just like any other element, therefore you don't need a span around it.