Unclickable image inside link in IE7

Question

Having a problem with IE7, here is explanation.

HTML

<a class="item" href="http://google.com">
   <div class="itemImg">
       <img src="http://img-fotki.yandex.ru/get/4512/vmazann.0/0_52db2_1c3135a9_orig.jpg" alt=""/>
   </div>
   <h3>Hello World</h3>
</a>

CSS

.item {
   color: #140804;
   cursor: pointer;
   padding: 17px;
   position: relative;
   text-align: center;
   text-decoration: none;
   width: 142px;
   display:block;}
.item * {
   cursor: pointer;}
.itemImg {
   background: none repeat scroll 0 0 red;
   height: 150px;
   line-height: 150px;
   margin-bottom: 10px;
   overflow: hidden;
   text-align: center;
   vertical-align: middle;}
.itemImg img {
   vertical-align: middle;}

Result

http://jsfiddle.net/qjSpS/11/

Problem

In IE7 image is unclickable

My thoughts on problem

It seems that problem is related somehow with hasLayout property setting on .itemImg. If I remove properties that trigger hasLayout (height: 150px; and overflow: hidden;) then image will be clickable

Question

Is there any way to solve this problem? height: 150px; and overflow: hidden; are required properties.

score 3 · Answer 1 · answered Mar 04 '11 at 13:14

3

It may be that in IE you can not wrap an inline element <a> around block level elements <div> or <h3>.

Most browser will ignore it and act how you'd expect, but IE is pretty strict on the matter.

answered Mar 04 '11 at 13:14

Seth

6,240
3
28
44

First of all - this is valid markup with HTML5 doctype. Anyway - the same result exists with inline elements inside a link, but declared as a block. I need block element (or inline element declared as a block) inside a link to vertical align an image within this block-level element – Andrey Mar 04 '11 at 13:52

score 3 · Answer 2 · answered Sep 20 '11 at 16:26

3

THis is how i solved this problem..instead of:

<a><div><img></div></a>

i did this:

<a href=""><div><div style=background:url(img.jpg);width:10px;height:10px;></div></div></a>

worked like a charm.

answered Sep 20 '11 at 16:26

Drew

31
2

yep, just add a block level element like a `
` wrapping inside the `` tag
– Haroldo Sep 26 '11 at 14:20

score 1 · Answer 3 · edited Oct 20 '12 at 04:13

1

if ($.browser.msie  && parseInt($.browser.version, 10) === 7) {
    $('.itemImg').click(function () {
        $(window.location).attr('href', $(this).parent('a').attr('href'));
    });
}

edited Oct 20 '12 at 04:13

xdazz

158,678
38
247
274

answered May 22 '12 at 15:43

youssef simon

11
1

3

Answering a CSS/HTML question with a block of jQuery without explanation isn't very helpful. Please provide some info on what you are doing, and why JS would be the appropriate solution. – Jørgen R May 23 '12 at 13:59

Luke Duddridge · Answer 4 · 2011-03-04T14:36:58.743

1

Have you noticed that with the image the red border around the edge is clickable?

I think the div is the cause of the problem.

can you do away with the div?

I tweaked your example to show how it might work without the div: http://jsfiddle.net/qjSpS/10/

EDIT had another go: http://jsfiddle.net/qjSpS/14/

Not completely happy but it has made all the elements clickable.

edited Mar 04 '11 at 14:36

answered Mar 04 '11 at 13:30

Luke Duddridge

4,285
35
50

Actually this is not a border - this is an .itemImg div. No, I cant remove the div. I need it to vertical align an image – Andrey Mar 04 '11 at 14:06

Unclickable image inside link in IE7

4 Answers4