Internet Explorer z-index CSS Dropdown Bug

Dieser Internet Explorer kann uns Webdesigner ja schon ziemlich ärgern.

Gestern war es wieder mal soweit, ein Stylingproblem im IE7 schien unlösbar.

Ausgangslage:

• CSS Dropdown Menu per hover

Problem:

• Im Internet Explorer 7 erschien das Menu halb hinter dem Text und war nicht bedienbar

Die Lösung lag dann auch sehr nahe. Im Internet Explorer ist ein z-index Bug enthalten, welcher die Funktionalität der z-index Angabe mehr oder weniger ignoriert. Die Lösung war dann relativ einfach, man musste aber erst darauf kommen:

Der Internet Explorer setzt den Stack zurück, wenn die Elemente separat angeordnet wurden.

So muss ganz einfach den Elementen die Abhängigkeit erklärt werden - mittels position: relative; und einem z-index für das Header-Element.

Beispiel Headerelement, in welchem das Menu enthalten ist:

#wrapper #header {
position: relative; z-index: 2;
}

Beispiel folgendes Containerelement:

#wrapper #container {
position: relative;
}

Danke, Internet Explorer ;)

Details können bei Jonathan Stegall (englisch) nachgelesen werden.