Abonnieren
Ich habe schon mehrmals versucht, Definitionslisten einzusetzen um zweispaltigen Inhalt dazustellen. Dazu bekommt einfach <dt> ein float: left; und der Inhalt von <dd> steht dann rechts daneben. Elegant, semantisch korrekt und vor allem ohne Tabellen. Leider hat mir bisher der IE immer einen Strich durch die Rechnung gemacht. Jetzt habe ich endlich die Lösung gefunden.
So soll es aussehen:
Aber so sieht es im IE leider aus:
Da mir nicht klar war, worin der Fehler liegt, habe ich natürlich keine Lösung gefunden. Bis mir heute folgender Artikel untergekommen ist: The IE Three Pixel Text-Jog von Holly n John auf positioniseverything.net, darin wird das Problem beschrieben und eine Lösung gezeigt. Allerdings stellt John das Problem im Zusammenhang mit floatenden <div>-Containern dar, ausserdem verwendet er etliche Hacks, auf die ich lieber verzichten will. Aber man kann seine Lösung leicht auf mein Problem übertragen.
Der Quellcode sieht zunächst so aus (so funktioniert er in allen modernen Browsern):
dl { margin: 0px;
padding: 0px;
line-height: 1.4em;
font-size: 0.9em; }
dt { float: left;
width: 10em;
margin: 0.5em 0;}
dd { margin: 0.5em 0 0 10em; }
Das Beispiel kann hier aufgerufen werden. Achtung: der Fehler taucht natürlich nur im IE auf.
Folgende Ergänzung führt auch im IE zu einer korrekten Darstellung (es handelt sich um den sogenannten Holly-Hack):
<!--[if IE]>
<style type="text/css">
dd {height: 1%}
</style>
<![endif]-->
Das korrigierte Beispiel ist hier zu finden.
Eigentlich ist diese Ergänzung widersinnig, da jetzt der ganze Absatz nur 1% hoch werden soll. Deshalb muss diese Ergänzung auch vor allen anderen Browsern versteckt werden. Der IE hat jedoch noch einen anderen Darstellungsfehler, er dehnt nämlich im Gegensatz zum Standard die Höhe eines Containers automatisch auf die Höhe des Inhaltes aus, und somit passt es wieder.
Durch die Verwendung von <!--[if IE]> vermeide ich die anderen Hacks, die John beschreibt und muss die Ergänzung auch nicht vor dem IE 5 für Macintosh verstecken.
Wie John schreibt, ist letztlich auch diese Darstellung nicht ganz korrekt. Der IE schiebt nicht die ersten beiden Zeilen nach links, sondern die folgenden Zeilen um drei Pixel nach rechts. Wenn man mit <div>-Containern arbeitet, muss das in der Regel korrigiert werden, aber in meinem Fall können mir diese drei Pixel Versatz im Vergleich zu modernen Browsern egal sein. Mein Problem ist mit diesem einfachen Zusatz also gelöst. Endlich.
Soweit ich mittlerweile herausgefunden habe, liegt die Ursache dieses Fehlers in einer IE-spezifischen Property namens »hasLayout«. Container mit dieser Property weisen diesen »Drei Pixel Fehler« nicht auf, Container ohne die Property schon. Eine gute Erläuterung der Zusammenhänge ist hier zu finden.
Diese Tatsache erklärt, warum der Hack von John funktioniert: die Eigenschaften width und height verleihen einem Container automatisch diese Property. Aber es gibt noch eine Reihe weiterer Properties, die ebenfalls wirken, allerdings nicht alle in IE5:
Das hier wirkt nur in IE 5.5 und 6 (Beispiel):
<!--[if IE]>
<style type="text/css">
dd {zoom: 1.0}
</style>
<![endif]-->
Das Attribut float verleiht ebenfalls hasLayout, allerdings müssen dann beide Container floaten. Das führt allerdings in nicht-IE-Browsern zu einer fehlerhaften Darstellung, deshalb ebenfalls in Conditional Comments. Ausserdem muss dann der linke Einzug bei dd entfallen. Das nächste Beispiel wirkt in IE 5.0 bis 6 (Beispieldatei):
<!--[if IE]>
<style type="text/css">
dd {
float: left;
margin: 0.5em 0 0 0em;
}
</style>
<![endif]-->
Mag sein, es gibt noch mehr Möglichkeiten.
Von Peter am 24.02 um 17:44 Uhr. Kategorie: HTML-CSS
Trackback-URL: http://www.lisardo.biz/trackback/194/fqxdcTrH/