IE/: wrong z-index for hover-effect

i build an hover-effect using CSS only. It wo开发者_C百科rks fine in all browsers except IE7.

Visit the page or view a screenshot.

As i read, it's because:

In Internet Explorer versions 6 and 7, the stacking order of z-indexed elements is essentially “reset” for any elements that are contained by a positioned element, regardless of wether or not the container (or parent) has a z-index value set. In other words, an element with a z-index value of 100 will appear underneath an element with a z-index value of 1 if the former element is contained by a positioned parent, and the latter is not. This is an incorrrect implementation of the z-index property that has evidently been corrected in IE8.

But how can i fix this IE7-bug?

I think you may want "z-index" instead of "zIndex." I've never seen or used the "zIndex" string. However, I am not sure if this will fix your problem.

Try adding position:relative; to your style. z-index bug for ie7 is pretty popular. Here is a link that explains more about it.