Internet Explorer z-index bug?

Solution 1:

Looks like I'm kidding, but I am not

.myLinkCssClass {
    background          : url(#);
}

Solution 2:

You're not by any chance trying to put something over a combobox (select tag), iframe or flash movie right?

In those cases z-index is a lost cause.

Otherwise what browser version are you using and are you using absolute positioning?

Solution 3:

I had a real pain with this problem that this particular workaround wasn't relevant for. It's a little hard to explain so I'll try using code:

<div id="first" style="z-index: 2">In between</div>
<div id="second" style="z-index: 1">In the back
<div id="third" style="z-index: 3">Foreground</div></div>

The problem is that setting the parent's z-index to a higher value would move it to the foreground instead of the back where its supposed to be. I stumbled upon a solution completely by accident: I made a copy of the foreground element (id=third) outside its parent.

<div id="first" style="z-index: 2">In between</div>
<div id="third" style="z-index: 3; visibility:hidden">Foreground</div>
<div id="second" style="z-index: 1">In the back
<div id="third" style="z-index: 3">Foreground</div></div>

Its worth mentioning that in my original code the elements don't have IDs so I don't suffer from 2 elements sharing the same one and invalidating my HTML.

I think its safe to classify this weirdness as another bug that happens to help with the original, but it works, at least for me. Hope somebody finds this useful!