Z-Index problems with IE6 and html <select> element

Question

I have a <div> that opens up on a jquery hover event (display goes from hidden to block).

Sometime it's opens up over some form elements. And of course it works fine in all browsers except IE6. <select> boxes bleed through as if there z-index is higher than the <div> tag. I've tried setting the <div> tag with a higher z-index, but it still gets ignored by IE6.

I'm hoping to implement any fix -- jquery or css, I really don't care at this point.

Any ideas?

Answer 1

As far as I know, there is no simple workaround for this (see this MSDN blog entry). I know only clever but really really complicated workarounds such as this one. Yuck!

Answer 2

You need the bgiframe plugin.

Answer 3

z-index is buggy in all versions of IE but IE6 in particular lets "select" always be on top.

Answer 4

Ditch IE 6, Microsoft will stop supporting IE6 from June this year. No more security updates.