„Spaß“ mit dem Internet Explorer: Änderungen ohne Änderungen

31.03.2011

Im Prinzip war das Konzept einfach: Im HTML-Quelltext sollten die Seiten-Elemente wie folgt sortiert sein:

  1. Header
  2. Inhalt
  3. Menü
  4. Footer

Per CSS wurde das Menü zum Dropdown-Menü und zudem per position:absolute direkt unter den Header platziert. Das funktionierte problemlos in folgenden Browsern:

Der Internet Explorer 8 spielte nicht mit. Er zeigte das Menü schlicht überhaupt nicht an. Es war nicht da, stattdessen war eine Lücke dort, wo es sein sollte.

Ich spielte ein wenig mit den IE-eigenen Entwicklertools herum – und siehe da, wenn ich das Häkchen bei position:absolute entfernte, so wurde das Menü angezeigt und zwar dort, wo es sein sollte. Was verwunderlich ist, denn eigentlich sollte es sich ohne diese Angabe ganz woanders befinden.

Mich machte das Ganze stutzig und so fügte ich dem Template folgenden JavaScript-Code hinzu:

var nav=document.getElementById('dropdown-navigation');
nav.style.position = nav.currentStyle.position;

Zur Erklärung: Zuerst wird das Menü-Element ausfindig gemacht, diesem wird dann für die CSS-Eigenschaft position direkt der Wert zugeordnet, den es bereits hat.

Das Ergebnis war erstaunlich – das Menü wurde im Internet Explorer sichtbar! Erstaunlich ist es vor allem deswegen, weil der JavaScript-Code eigentlich nicht viel ändert, der zugewiesene Wert ist der Gleiche, nur dass er jetzt direkt zugeordnet ist, nicht mehr via Stylesheet.

Mit style="position:absolute" funktionierte es leider nicht. Ich werde also weiter nach einer JavaScript-freien Lösung suchen müssen. Wenn es sich um ein privates Projekt handeln würde, würde ich es vielleicht sein lassen, aber den Luxus kann ich mir im Berufsleben natürlich nicht erlauben.

Danke, Microsoft!