How to fix HTML z-index layer ordering in IE7?

Question

I have a popup that is displayed above the link when I hover over a link. There is an image just above the link so the problem is that in ie7 the popup is appearing under the image. It works well in IE8 and Firefox.

The problem that I want to fix is found on this page: http://www.kandscars.com/servicecontracts.php . If you hover over "Class One" then hover over "Cars In This Class".

Answer 1

I did some debugging and it turns it's the opacity filter for IE on the <div class="cover boxcaption"> that's causing the cut off, not the image.

I couldn't get it working with the filter applied so the only thing I can suggest that will fix it is to use a semi-transparent background png instead of using css to apply the transparency.

Answer 2

You need to set the z-order to 1 in the css class of the popup. I found the same problem a couple of months ago!