jQuery Z-Order Problem in IE 6

Question

I'm having a problem with displaying a div in with the jQuery fadeIn() command. Everything displays fine in IE 7 and IE 8, but in certain versions of IE 6 (SP2 for instance), fields from the grid that the div appears over show through the dialog.

Anyone have any hints? I have a screenshot but can't get to an image hosting site behind the firewall presently...

Answer 1

This solved "most of" the problem for me...

IE 6 select controls(Combo Box) over menu

Answer 2

I'm guessing that the fields that show through are select boxes. If this is the case, this has been a problem with IE6. The select box will always show on top of everything. The way around this is hide the select boxes when you want to show the overlaying div and un-hide them when the overlaying div goes away.

Answer 3

Try this:

1. Give the elements (that should be behind) a z-index:-1 and position:relative

2. Give the parent of the front element a higher z-index.

You can accomplish this using css or javascript. Let me know if you have any questions on how to implement this.