views:

112

answers:

3

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...

+1  A: 

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.

JAKEtheJAB
Hmm...I gave the "behind" elements a z-index of -1, and the popup a z-index a higher index (used 900), but the select controls (dropdowns) still show through. I wonder if the issue is what KevnRoberts above points out...
Sam Schutte
+2  A: 

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.

KevnRoberts
A: 

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

http://stackoverflow.com/questions/552326/ie-6-select-controlscombo-box-over-menu/553763#553763

Sam Schutte