Image is not clickable inside anchor only in IE7

Question

Html Structure

      
   
   
    Some text 
<         


        

Answer 1

Ah another hasLayout quirk

it's not possible to achieve in IE7 and still retain the width of the span, if you could show what you're trying to achieve in a JS fiddle perhaps we could help, find a way around it e.g. and this is only a guess, putting the width on the anchor with some padding would help create a completely clickable area and still allow a "caption" span to be restrained if that's what you're after..

Example workaround not a fix

CSS:

a {
  display: inline-block;
  background: #ff0; 
  max-width: 50px; 
  padding: 10px; 
  text-align: center;
}

img {border: 0; display: block; margin-bottom: 10px;}
span {line-height: 1.5;}

HTML:

<a href="#">
   <img width="50" height="50" src="http://dummyimage.com/50x50/000/fff" alt="">
   <span>Some text and even longer</span>
</a>

The above is only a thought, and if it's not what you're after, then please provide a sample jsfiddle.net

Answer 2

CSS Only Solution

Tomas-I modified your fiddle into a working example. I changed your code to use a span inside the a tag because it is invalid to have a standard block level element (a div) in an inline element (an a tag). Giving the a tag layout (I used inline-block) and then setting a position:relative on that span with a z-index: -1 pushes the span "below" the a tag and makes IE7 recognize the a tag as active again. Below is the modified code used in my fiddle. You might want to set up a more generic class name than my ie7AFix (you probably will also want to just target IE7 for those CSS properties that are necessary for it only). I assume you are varying the width and height by images, and hence why you have those as inline styling.

HTML

<a href="http://www.google.com/" class="ie7AFix">
  <span style="width:222px; height: 150px;">
    <img src="http://artax.karlin.mff.cuni.cz/~ttel5535/aviff/photos/scaled/P000137_220x148.jpg" style="width:220px; height: 148px;">
  </span>
</a>

CSS

a.ie7AFix {
    display: inline-block; /*needs to set hasLayout; zoom: 1, etc.*/
}

.ie7AFix span {
    border: solid #666 4px;
    display: block;
    position: relative;
    z-index: -1;
    line-height: 0; /*this made it "cross browser" eliminating extra bottom space*/
}

.ie7AFix img { border: 1px solid red; }

Updated Fiddle with line-height added to make "cross browser" if one does not want to target IE7 only. I kept the width and height in the span html above, only because the original question (by both gviswanathan and Tomas) requested it. If you don't need to set the dimensions on the span for some reason, but are simply trying to do a double border on the image, then thirtydot's answer given in the comment's below is much simpler.

Answer 3

See fiddle for code and demo

Fiddle: http://jsfiddle.net/rxcAb/29/

Demo: http://jsfiddle.net/rxcAb/29/embedded/result/

Perfectly working in IE7, IE8, FF, Chrome, Safari.

No changes in code: See below

<a href=http://www.google.com/>
<div class="gal_image" style="width:222px; height: 150px;">
        <img src="http://artax.karlin.mff.cuni.cz/~ttel5535/aviff/photos/scaled/P000137_220x148.jpg" style="width:220px; height: 148px;">
</div>
</a>

Answer 4

With jQuery, the following will force all links to work, and have the 'pointer' cursor:

$(document).ready(function () {

    $('a')
        .click(function () {        
            window.location = $(this).attr('href');
        })
        .hover(function () {
            $(this).css('cursor', 'pointer');
        });

});

I've tested this simulating IE7 with IE8 in compatibility view mode, but can't guarantee it will for IE7 on its own.

You may want to apply this more selectively -- I suspect that, as is, this might slow down older browser performance -- in which case apply a class (like <a href='myClass'>) to all links that are broken this way, and just change $('a') to $('.myClass')

Answer 5

give the following CSS rules to the a element:

{
    display:block;
    overflow:hidden;
}

Answer 6

May be it's a problem is that because you didn't define href="#" inside your <a> TAG So, put href="#" inside your <a> TAG. Write like this:

<a href="#">
   <span>   <!-- Span has width & height -->
   <img>
   </span>
   <span> Some text <span>
</a>