I have placed a Div on top of an img tag. In my example the Div with cls 'justForClickCls' is placed on top of an img which is wrapped in another div 'gameBoardElementGreyCls'. The mousedown on the 'justForClickCls' div is not firing in IE. However it works in every other browser.

Here is the code. Any help is much appreciated. By the way i'm testing it i IE 9

<div class='gameBoardElementCls'>
    <div id='9' class='justForClickCls' style='z-index:10;position:absolute;margin:20px;width:80px;height:80px;'></div>
    <div class='gameBoardElementGreyCls'><img src='img/greygmelement.png' width='110px' height='110px'></img></div>
</div>

<script>
    $("div.justForClickCls").mousedown(function () {
        alert('clicked 1');
    });
</script>

I have placed a Div on top of an img tag. In my example the Div with cls 'justForClickCls' is placed on top of an img which is wrapped in another div 'gameBoardElementGreyCls'. The mousedown on the 'justForClickCls' div is not firing in IE. However it works in every other browser.

Here is the code. Any help is much appreciated. By the way i'm testing it i IE 9

<div class='gameBoardElementCls'>
    <div id='9' class='justForClickCls' style='z-index:10;position:absolute;margin:20px;width:80px;height:80px;'></div>
    <div class='gameBoardElementGreyCls'><img src='img/greygmelement.png' width='110px' height='110px'></img></div>
</div>

<script>
    $("div.justForClickCls").mousedown(function () {
        alert('clicked 1');
    });
</script>

• javascript
• jquery
• html
• internet-explorer

3 Answers 3

In my case setting opacity to zero is not a valid solution since the div has other elements that would bee invisible. This solved the problem. Add the following to the div style: background-image:url('.');

Got stuck with the same problems for hours and user983327's last ment saved my day: IE required me to set a background color for the element to work.

Setting the opacity to 0 then achieved the same result as having a transparent background and made the whole thing cross browsers patible.

First thing you should fix is the closing tag in the img

<img src='img/greygmelement.png' width='110px' height='110px'></img>

To

<img src='img/greygmelement.png' width='110px' height='110px' />

Next, mousedown seems unnecessary since you are trying to trap the click. Simple use click instead of mousedown.

Now check this demo of you coding, which is working