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.
Ich glaube dieses Bild spiegelt die Problematik korrekt wieder: http://www.reddit.com/tb/ve2wu?utm_source=googleplus&utm_medium=socialmedia&utm_campaign=googleplusclickthru
Sehr cool 🙂