Take the 2-minute tour ×

I have a table of 100 images (10x10) and the same table of DIVs above it. They are positioned correctly on top of each other, even in IE8 (dear Lord). Now, the script is very messy, so I'll describe the main idea:

All the tables have absolute positioning. The z-index of the DIVs is Google and of the images is 0. The idea of that table is, basically, drawing lines. By this I mean: I start to drag a line from a certain DIV to the destination DIV, a script runs and calculates the line, sends the info to the image generator, which returns the images to be put in the tables of images. This brilliant idea works perfectly in all browsers, except for IE8, which GRABS, like a cancer, the image underneath the clicked DIV and drags it all over the place, trolling me badly.

How can one overtake that?

P.S. I know, you, guys, will ask for some code, but the are about 200 lines to handle the whole process, which is described above, so if you insist, I can send it via FedEx...

Some necessary lines

#elecWorkshop , #elecLinePreview , #elecStaticPreview{
    position: absolute;
    margin: 0;

#elecStaticPreview , #elecLinePreview{
    z-index: 0;

    z-index: 50;

#elecLinePreview .drawImg{
    position: relative;
    z-index: 0;

#elecStaticPreview .statImg{
    position: relative;
    z-index: 0;

#elecWorkshop div{
    position: relative;
    z-index: 50;
    display: inline-block;

And the structure of DOM

<div id="elecLinePreview"><img id="prev_0_0" class="drawImg" src="blabla" /></div>
<div id="elecStaticPreview"><img id="stat_0_0" class="statImg" src="./renders/blank.png" /></div>
<div id="elecWorkshop"><div id="0_0"></div></div>
share|improve this question
Give it layout. –  BalusC May 20 '12 at 1:21
Michael, posting the entire code would of course be an overkill, but what's wrong with posting a subset or a smaller example that highlights the problem? It's not unreasonable for this community to require that you provide code for these types of questions. In fact, it helps you get better answers. –  jmort253 May 20 '12 at 1:22
@jmort253 I had added some code. –  Michael Sazonov May 20 '12 at 1:35

2 Answers 2

up vote 4 down vote accepted

Set a background color to the divs and the CSS filter to alpha(opacity=0). This should make the divs invisible but reacting to the mouse events, instead of letting it pass to the image underneath.

Of course, use opacity for the other browsers.

share|improve this answer
Very cool solution. Thanks –  Michael Sazonov May 20 '12 at 1:39

Try this in the CSS for the images:

-ms-user-select: none;

Internet Explorer should be outlawed.

share|improve this answer
That did not work for me. It seems like IE8 treats elements without background set as clickable-through. –  Michael Sazonov May 20 '12 at 1:45

Your Answer


