elbwiese.de – Webentwicklung

Warum der IE 6 glücklich macht

In eine neue Website, an der ich mit den Kollgen von 3undzwanzig arbeite, wollte deren Webdesigner eine recht simple Funktion einbinden: Während der Nutzer mit der Maus über eine Navigationsliste mit Städtenamen fährt, sollte in einer Deutschlandkarte der jeweilige Ort angezeigt werden. Das ließ sich mit ein bisschen JavaScript bewerkstelligen und funktionierte in allen Browsern – nur im Firefox nicht. Die Lösung bescherte ausgerechnet der Internet Explorer 6.

Um kein Code-Monster schreiben zu müssen, habe ich – wie schon oft an anderer Stelle – das JavaScript Framework jQuery eingesetzt. Der Code ist denkbar simpel:

<script type=\"text/javascript\">
$(document).ready(function(){
 $("#block_2 h2").after("<p id=\"kartenort\"></p>");
// bindet funktion an Navigationslink
    $("#navi_ring a").hover(function(event){
        if (event.target == this) {
// liest Inhalt des Links aus und schreibt ihn in <p id=\"kartenort\"></p>
        $("#kartenort").html($(this).text());
// liest class des Links aus und fügt diese in <p id=\"kartenort\"></p> ein
        $("#kartenort").addClass($(this).attr("class"));
        }
    },function(){
        //entfernt class
        $("#kartenort").removeClass();
});     
});
</script>

Das Script sollte ausreichend kommentiert sein, um dessen Funktion zu verstehen. Mit ein wenig CSS werden dann die Ortsnamen korrekt auf der Karte positioniert.

So weit, so gut. Nur im Firefox wollte es partout nicht laufen – das Script weigerte sich, die class in den Absatz zu schreiben. Auf der Suche nach dem vermeintlichen Fehler habe ich Stunden verbracht – und erst ein Zufall verhalf zur Lösung. Als ich nämlich wegen eines anderen sehr eigentümlichen Fehlers die CSS-Datei mit dem Firefox-Addon Firebug besah, staunte ich nicht schlecht: etliche Codezeilen in der Datei fehlten einfach. Cache leeren, neu laden half nicht, die Code-Zeilen blieben verschwunden.

Als Ursache entpuppten sich einige CSS-Code-Zeilen, die dem Internet Explorer 6 gelten und die nötig sind, um jqModal zu betreiben und von denen hier nur ein Ausschnitt wiedergegeben werden soll:

* html .jqmWindow {
…
top: expression((document.documentElement.scrollTop||document.body.scrollTop) …
…
}

Alles was danach folgte, wurde vom Firefox ignoriert und interessaner Weise auch vom Internet Explorer 8.

Die Lösung des Problems war dann ganz einfach: die Zeile wurde ganz ans Ende der CSS-Datei verschoben – die Funktion lief nun auch im Firefox. Und der IE 6 hatte mir ein Erfolgserlebnis verschafft, dass ich ohne dieses Elend von Browser wohl nie hätte erfahren dürfen.

Da übersehe ich gerne, dass mir Microsoft mehrere Stunden Lebenszeit gestohlen hat.

Neueste Artikel

• Johanniskirche online
• Website für Theaterkasse
• Land braucht Stadt
• Drei Künstler, ein Projekt
• Bariton in HTML5