Comments on: IE z-index bug

By: Z-Index Issues in Internet Exploder « Vir2oso Design

Z-Index Issues in Internet Exploder « Vir2oso Design — Fri, 05 Mar 2010 01:53:58 +0000

[...] I am currently redesigning my employer’s web site. I use Dreamweaver so creating drop-down menus is a snap using Spry. After previewing the index page in the browser I noticed a familiar problem. The index page has a flash animation as it’s main content and the items from the drop-down menu were appearing behind the flash window. Simple fix as I had been through this before. Just change the wmode parameter of the flash file to transparent and pat myself on the back for a job well done. Well, it didn’t work. The first day and a half was spent trying to figure out why changing the wmode worked on another site I had built in the past but not this one. I was about to pull my hair out, such as it is, when I realized that the menu was not just appearing behind the flash animation but any content in the div below it. That’s when it hit me that it was a z-index issue. Once again, simple fix. Just assign the div containing the navigation a higher z-index than the div that appears below it. Didn’t work. The second day and a half was spent searching for a solution and then blindly applying position and z-index attributes to various divs in the header element and the content element. I was about to pull my hair out (such as it is) when I stumbled upon the answer found at http://verens.com/archives/2005/07/15/ie-z-index-bug. [...]

By: IE6 CSS bug: dropdown menu, z-index e elementi dei form. at My Notepad

IE6 CSS bug: dropdown menu, z-index e elementi dei form. at My Notepad — Tue, 28 Apr 2009 20:39:52 +0000

[...] Non contenti del fatto che IE6 sia la principale causa di dropdown menu costretti a far uso di javascript (oltre che di mal di testa da programmazione), gli sviluppatori di Redmond hanno pensato bene di introdurre un altro bug nell’interpretazione CSS, che riguarda l’elemento select (che non supporta z-index, ecco un workaround) e anche lo z-index di elementi che abbiano position:relative. [...]

By: IE z-index bug with CSS dropdown menu | jonathan stegall

IE z-index bug with CSS dropdown menu | jonathan stegall — Thu, 15 Jan 2009 23:55:18 +0000

[...] web designers generally know of the z-index bug in all versions of Internet Explorer (though, version 8 is rumored to fix [...]

By: Problema con bug de z-index en ie | Santa Pola

Problema con bug de z-index en ie | Santa Pola — Mon, 10 Nov 2008 23:25:47 +0000

[...] de buscar un poco, encontré con klog y pude dar con ello. Os pongo el ejemplo que pone [...]

By: Superfish jQuery Menu IE z-index Bug | webdemar.com

Superfish jQuery Menu IE z-index Bug | webdemar.com — Thu, 06 Nov 2008 15:17:42 +0000

[...] Both the header and the content div have position:relative. In IE the dropdown menu was displayed under the content div so the links in the dropdown were not clickable though the z-index of the menu list was set to 100. After a bit of research I came accross the IE z-index Bug on Klog – php, linux, ajax, javascript. [...]

By: BugRocker

BugRocker — Fri, 18 Jan 2008 10:37:59 +0000

Go an easier workaround:

z-index: 0 !important; z-index: -1;

Et Voila!

By: eric

eric — Sat, 12 Jan 2008 07:19:08 +0000

eh, ignore that fix. the code didn’t come across anyhow!

By: eric mueller

eric mueller — Sat, 12 Jan 2008 07:11:10 +0000

thanks for this info — my easy workaround was to just wrap my elements in another div, positioned absolutely… i.e.

<- this is to fix bug

etc etc

<– close ie7 fix div

thx thx
E

By: Jens Brandt

Jens Brandt — Thu, 03 Jan 2008 15:42:49 +0000

Let me join the choir of thankful people: I’ve been looking around the web, but this sentence explained it all: “It appears that if you have multiple position:relative elements in your code, then IE sets up separate Z layer contexts for each one, which ignore each other”.
Thanks!

By: Rengirl

Rengirl — Fri, 03 Aug 2007 01:24:17 +0000

THANK YOU THANK YOU THANK YOU! I was splitting hairs over this stupid IE css error and I was about to give up until I found this. Problem solved.