Clicking on a div placed over an image in IE

Question

I have an image which may have some divs over it (specifying certain selections within that image). These divs are supposed to be clickable. Something like that:

#divOuter { width: 500px; height: 500px; border: 2px solid #0000FF; position: relative; } 
#divInner { width: 100px; height: 100px; border: 2px solid #00FF00; position: absolute; cursor: pointer;  top: 20px; left: 20px; }

<div id="divOuter">
    <img src="SomeImage.jpg" />
    <div id="divInner"></div>
</div>

$("#divOuter").click(function() { alert("divOuter"); });
$("#divInner").click(function() { alert("divInner"); });

In chrome and FF it works as expected (pointer appears over the div, and clicking it alerts "divInner" and then "divOuter").
However, in IE8 it didn't - I got the same behavior only when hovering/clicking on the inner div borders. When clicking inside that div, only "divOuter" was alerted.
How can this be fixed?

Answer 1

Here's a hack: add an CHAR like "O" to the inner div, and then give it an enormous font size(depends on the area you want to span over):

#divInner { /* ... */; font-size: 1000px; color: transparent; }

(Also set "overflow: hidden" I think.)

IE likes there to be something there in the container for the click to affect. If it's just completely empty, it ignores clicks.

a fiddle: https://jsfiddle.net/cbnk8wrk/1/ (watch in IE!)

Answer 2

I had the same problem with an unordered list, see Getting unordered list in front of image slide-show in IE8, IE7 and probably IE6

The solution : give the div a background color and make it transparent with a filter.

Answer 3

Adding an 1x1 px transparent background gif to the div is also working.

#divInner { background: url(/images/transparent.gif); }