Christoph S. Ackermann

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.

2 responses to “Internet Explorer z-index CSS Dropdown Bug

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Lust auf mehr?

Eignet sich Twitter für mein Unternehmen? 12 Facts und 8 Benefits

Sarah Berger
Kurz zur Erinnerung: Die kostenlose Social Media Plattform …
Blogbeitrag ansehen
Outing als Digital Rebels

Unser Outing als Digital Rebels mit Impact

Fabienne Mast
Am 21. Januar 2021 exakt um 21:01 Uhr …
Blogbeitrag ansehen

Interview mit Bijoux Stadelmann: Wie hat die Coronavirus-Krise ihre Geschäftssituation verändert?

Anna Gottschalk
Das Familienunternehmen Bijoux Stadelmann ist ein langjähriger Kunde …
Blogbeitrag ansehen

Interview mit Nelson zu seiner IPA

Nico von Niederhäusern
Wie bereits im Blogpost «Unsere Mitarbeiter im Fokus …
Blogbeitrag ansehen