IE 7 - Zapps Blog

Ich habe momentan ein leichtes Déjà-vu-Erlebnis, das mich ein paar Jahre zurückwirft.

Als ich damals begann mich für HTML und CSS zu interessieren, fand ich die Möglichkeiten beider Sprachen faszinierend und das Konzept der Trennung von Inhalt und Layout einleuchtend. Der erste Tatendrang wurde zeitweise nur durch eine Software aus dem fernen Redmond gebremst: den Internet Explorer.

Version sechs verhielt sich oft anders, als man das angesichts des Codes erwarten sollte. Schnell war klar, dass das nicht nur am anfängerhaften Code sondern auch und vor allem am veralteten Browser lag und mit der Zeit und einigen Internetrecherchen lernte ich manche Eigenheiten des IE kennen. Begriffe wie „Star-HTML-Hack“ und „hasLayout“ verloren ihre Schrecken und so wurden Layouts möglich, die auch im im IE 6 und seinem grossen Bruder IE 7 akzeptabel aussehen.

Nun stehe ich mit JavaScript wieder am Anfang einer neuen Websprache und was soll ich sagen: Die Probleme sind ähnlich. Es gibt recht klare und einleuchtende Konzepte, die in der Praxis am IE scheitern.

So gibt es etwa die setAttribute-Methode, die einem Knoten ein Attribut zuweisen kann. Einem Link kann beispielsweise mit linkknoten.setAttribute("class","externer"); die Klasse „externer“ zugeteilt werden, die man mit der komplementären getAttribute-Methode auch wieder auslesen kann. Mit der gleichen Syntax könnte der Link auch noch href- und title-Attribute bekommen, bevor er schliesslich in den Dokumentenbaum eingehängt wird. setAttribute ist universell einsetzbar und hat eine leicht zu merkende Syntax, warum sollte man sich für das Setzen und Auslesen von Klassen noch mit dem Wissen um die vergleichsweise spezielle className-Eigenschaft eines Knotens belasten müssen?

Ganz einfach: Weil der Internet Explorer in seinen beiden am weitesten verbreiteten Inkarnationen nicht zuverlässig damit klar kommt.

Durch setAttribute gesetzte Klassen, die der IE-DOM-Inspektor auch sieht, werden dann auf einmal vom CSS nicht beachtet oder Klassennamen werden nicht korrekt ausgelesen, weshalb das betreffende Script dann natürlich nicht im IE funktioniert.

Genau das gleiche Problem existiert im IE bei der Behandlung des onclick-Attribut, auf das man verzichten und stattdessen knotenname.onclick = function(){}; einsetzen sollte.

Dummerweise stand das nicht in meinem ansonsten wirklich genialen Lehrbuch, was mir einige Stunden Gefluche mit meinem Lieblingsbrowser eingebracht hat. Bei einem so diffusen Problembild war meine Webrecherche erfolglos, und auf die Idee, bei SELFHTML ausgerechnet bei setAttribute nachzuschlagen um dort eine eindringliche Warnung inklusive Erklärung des Phänomens zu finden, bin ich leider nicht gekommen. So brachte erst ein beiläufiger Hinweis in einem JavaScript-Cheatsheet die Erleuchtung.

Und damit Google in Zukunft eine Stelle mehr im Web findet, die von Anfängerproblemen mit JavaScript, Klassen, Event-Handlern und dem Internet Explorer berichtet, habe ich diesen kleinen Beitrag verfasst.

Bei meinem Blogumzug bin ich auf zwei mir bislang unbekannte Browserbugs gestossen, über die auch eine kurze Google-Recherche keine Informationen lieferte. Beide betreffen eher experimentelle Browser, nämlich den Internet Explorer 7 und Safari 3.02 für Windows.

Die Standard-Sidebar ist bei Wordpress eine Ansammlung verschachtelter Listen:

<ul id="navi> <li> <h2>Rubriküberschrift 1</h2> <ul> <li>Navigationspunkt 1</li> <li>Navigationspunkt 2</li> </ul> </li> <li> … </li> </ul>

Mit dem dazugehörigen CSS kommen beide Browser nicht so recht klar:

• Safari ignoriert – mindestens für ul – komplett den Universalselektor * {margin:0; padding:0;} und benötigt für diese eine eigene Formatierung, also ul {margin:0; padding:0;}

• Der IE 7 produziert – erstaunlicherweise im Gegensatz zum IE 6 – Abstände über den inneren ul, obwohl laut IE-Web-Developer-Toolbar das CSS richtig vom Browser verstanden wird. Der Bug hat mal wieder mit der hasLayout-Eigenschaft der IEs zu tun und Abhilfe schafft ein *:first-child+html #navi ul {height:1%}

  Um die Gefahr von irgendwelchen Ãœberraschungen mit anderen Browsern zu verringern, habe ich hier im Selektor den Star-Plus-HTML-Hack angewendet, der momentan nur den IE 7 ansprechen sollte.

Es ist doch immer wieder schön, wie viele Ãœberraschungen man mit den verschiedenen Browsern erleben kann. Vielleicht hat ja auch noch jemand einen Tipp, warum Opera 9.2 das padding-top der li in meinen Bilderstreifen ul.bildergallerie li { display:inline; padding-top:15px; } ignoriert? Momentan kleben die Vorschaubilder in diesem Browser doch etwas eng aneinander, wenn sie nicht mehr alle in eine Zeile passen.

Oft wird bei der Gestaltung einer Webseite ein mehrspaltiges Seitenlayout angestrebt, bei dem sich die Länge aller Spalten automatisch nach der Spalte mit dem meisten Inhalt richtet. Die Umsetzung dieses Wunsches mit CSS ist etwas knifflig, mit float und absoluter Positionierung stösst man schnell an seine Grenzen. Daher werden zur Spaltenbildung teilweise noch immer Tabellen eingesetzt, die sich weitgehend ihrem Inhalt anpassen.

Dabei besitzt CSS mit den table-Werten der display-Eigenschaft die Möglichkeit, jedem HTML-Element bezüglich der Darstellung Tabelleneigenschaften zuzuordnen. So kann eine semantisch korrekte Seite aufgebaut werden, die sich trotzdem wie eine mit Tabellenlayout erstellte Seite verhält.

Der Quelltext für ein simples dreispaltiges Layout nach dieser Methode kommt ganz ohne float und absolute Positionierung aus: #rahmen { display:table; width:100%; } #rahmen div { display:table-cell; } #menu, #news { width:7em; } <div id="rahmen"> <div id="menu">Links</div> <div id="main">Mitte</div> <div id="news">Rechts</div> </div>

Beispiel

Dummerweise hat die Sache einen gewaltigen Haken: Der weit verbreitete Browser aus Redmond unterstützt auch in seiner neusten Version im Gegensatz zu allen anderen aktuellen Browsern die notwendigen Werte für display nicht. Somit scheitert ein einfaches Layouten mit CSS einmal mehr nicht an den Unzulänglichkeiten der Spezifikation, sondern an der Unfähigkeit des Browser-Marktführers.

Es könnte so einfach sein ...