Hi friends,

If you look at the following link on Firefox or Chrome, you'll understand the effect I want to achieve:


A drop-down menu with images & simple hover effects.

It works normally on Firefox & Chrome, but it gets kind of weird in IE7 (I'm not even considering IE6) . In IE7, the rings around the images end up getting overlapped by the images, which is not the effect I want. I want the rings to be always above (like FF & chrome). I tried to fix this with a higher z-index on the rings, but it's not having any effect whatsoever.

I've been trying to fix this without success, so I was hoping you could help me out.

Thanks in advance!

1 answer

Ktash 1851

Read this

Specifically, your elements have position: relative so they create a new stacking order. Work-around is found on that page, though you'll have to see if it works with your layout, I didn't check

Answered over 8 years ago by Ktash
  • I'm sorry, I don't understand. In which page is the workaround? Is there a link you forgot? What am I supposed to do about the relatively positioned elements? Rafael Viana over 8 years ago
  • On your page, the `li` element has position relative (the one with the image, not the circle), which in IE causes the z-index stack context to reset, meaning that it has a z-index of 0, and anything under it is stacked relative to other content inside, not to the entire document like in firefox. The fix is to use a z-index on your li elements. Or, at least, it should be in theory. Ktash over 8 years ago
  • I tried following this article: http://thedesignspace.net/MT2archives/000763.html But it doesn't seem to work on my case =/ Maybe I'm asking too much from poor IE7.. Rafael Viana over 8 years ago
  • From the looks of your design, your issue is that you rely on them all being in the same stacking context. To fix this, you'll have to change more code than CSS. The problem is the position: relative on the li elements, which reset stack context, but you need the position for your layout. If you find a new way to overlay the circles, you should be able to fix the issue. Ktash over 8 years ago
  • I use the relative positioning not only for the circles, but also for the text below the images. It'll be a hell of a workaround just for IE7 =(.. bummer Rafael Viana over 8 years ago