problem with z-index of an empty div layer in IE8

Question

I have a problem with z-index in IE8 (other IS not tested yet):

The following JS creates some html/css:

document.write('<img id="' + sas_Banderole.getObjId('cb') + '" src="' + cburl + '" style="position:absolute; top:5px; cursor:pointer;" onclick="sas_Banderole.trigger();" border=0>');
document.write('<div ID="closeReminder" style="z-index:10000; background-color:transparent; text-align: right; display:none; width:30px; height:100px; right: 0px; position:absolute; top:5px; cursor:pointer; color:fff; font-size:10px;" onclick="reminder_close();" border=0>&nbsp;</div>');


document.write('</div>');

Result should be, that I have:

• an IMG tag (close button) with a closing function.
• a DIV tag, which creates an div layer "CloseReminder" with an high z-index and an onClick event for closing an parent layer

The DIV must be in front of the IMG and should accoring to the css.

In FF, CHrome, Opera etc. it is working but in IE8 the layer is laying BEHIND the image. I can´t understand, why...

I found out, that if I give the layer a background-color (f.e. blue), the div is laying in front of the image, unfortunetaly not, if I give it the background-color "transparent" (it has to be unvisible)

Has someone a clue? Thanks for helping me,

Best, Dirk

Answer 1

A workaround:

Try adding background: black; filter: alpha(opacity=0); to the #closeReminder div. Not nice, but at least it works...

I guess there was some nicer solution, but I can't remember it (so it might just be a drunken dream).