Posted by Martin Plotz on 08/17/06 06:43

Dear Group,
I am in trouble with CSS and Internet Explorer. I have a div-element
which contains an image, and another div which is "above" the image.

This is my code (in "reality" I create this with javascript and there is
much more around, but this simple extract has the same behavior):

<div style="position: absolute; left: 0px; top: 0px;
width:200px;height:120px; background-color:Blue;">
<img src="myimage.jpg" height="112" width="200" style="z-index:1;">
<div style="border: 1px solid rgb(204, 204, 204); position: absolute;
cursor: crosshair; left: 58px; top: 23px; width: 66px; height: 41px;
z-index:2"> </div>
</div>

Note the "cursor:crosshair". This is what I want to achieve. In Firefox
it works, in IE I do not get the cursor as crosshair. As soon as I
remove the <img>-Tag, it works in IE too!!

I tried several things but I didn't get it working! What might be wrong?

(A bit more in detail: The crosshair-cursor is not the biggest problem.
It is the same with onmousedown-events. I do not receive them in IE when
the img is "behind" the inner div - and that is a real problem for my
application!)

Any help appreciated!

Martin

[Back to original message]