< Back to Main Site | Sign Up | Log In
 
Z-index IE Bug
Binder Author:  BT  | Last updated: 07-05-10  | Views: 7872  | Credits  |  Comments 0  |  Copy
Log in to rate this binder
IE Bug with z-index
Description of the bug with IE and z-index
Overview of how IE handles z-index
Positioning with Z-Index
The bug report on IE and z-index
Use an iframe to solve the IE z-index bug
Change the Stacking order to solve IE z-index bug
Change z-index on Parent to solve the IE problem
Compatibility - IE 8
Loading Livebinder

Z-index IE Bug


























Tab 0 -- IE Bug with z-index
IE bug with z-index
I'm on my third day of trying to work around this bug with IE and z-index.  The tabs above have some great work arounds (none which seem to work for me). 

Because I'm building my page with partials in ruby on rails, I can't change the stacking order (suggested in the solution on tab 7).  I tried changing it in javascript, that didn't work. 

I also tried using negative z-index numbers (suggested in the comments in tab 5).  This worked great, except those items are no longer clickable in FF, Safari, and Chrome.

I don't really want to use an iframe (suggested in tab 6) but I'm ready to try anything at this point!
Tried the iframe, it didn't work.

Second to last tab in this binder worked for me. I found a parent div, that I could insert a z-index into, which solved the problem.

If you are working on this lovely bug, best of luck and leave me a comment (comments link above the tabs) as to which solution worked for you.

Barbara


http://farm4.static.flickr.com/3550/3423365323_c2ae931598.jpg
Tab 1 -- Description of the bug with IE and z-index
http://verens.com/archives/2005/07/15/ie-z-index-bug/
Tab 2 -- Overview of how IE handles z-index
http://nathanostgard.com/archives/2007/5/16/relative_zindex_and_ie/
  Subtab 0 -- IE z-index bug
http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html
Tab 3 -- Positioning with Z-Index
http://www.kavoir.com/2008/12/css-z-index-doesnt-work.html
Tab 4 -- The bug report on IE and z-index
http://www.quirksmode.org/bugreports/archives/2006/01/Explorer_z_index_bug.html
Tab 5 -- Use an iframe to solve the IE z-index bug
See the sub tabs above
Click to add subtitle
http://www.hedgerwow.com/360/bugs/css-select-free.html
  Subtab 0 -- Using an iframe and javascript to solve the z-index IE bug
http://xlib.wordpress.com/2006/04/12/bug-fix-select-box-displayed-through-dynamic-div-in-internet-explorer/
  Subtab 1 -- JQuery Fix using an iframe
http://jetlogs.org/2008/05/09/jquery-fix-ie-select-box-z-index-bug/
  Subtab 2 -- Another example of iframe fix for IE z-index bug
http://blogs.freshlogicstudios.com/Posts/View.aspx?Id=daf6098d-897f-49e5-ab4b-0b308f652f21
Tab 6 -- Change the Stacking order to solve IE z-index bug
http://thatnorwegianguy.wordpress.com/2007/11/29/positioning-and-z-index-in-ie/
Tab 7 -- Change z-index on Parent to solve the IE problem
http://www.brenelz.com/blog/2009/02/03/squish-the-internet-explorer-z-index-bug/
Tab 8 -- Compatibility - IE 8
http://sunlightlabs.com/blog/2009/05/18/x-ua-compatible-django-middleware/

Thank you for rating the Z-index IE Bug binder.