TYPO3@lisardo

Die Formatierung von Definitionslisten mit CSS finde ich immer etwas knifflig, vor allem, wenn sie benutzt werden, um Formulare zu gestalten. Ziel ist hier, den Definition-Term (dt) mit den Labels links floaten zu lassen, und Definition-Data (dd) mit den Feldinhalten direkt daneben zu setzen. Das geht im Allgemeinen so lange gut, bis eines der beiden Elemente mehrzeilig wird: dann stehen beide Elemente plötzlich nicht mehr in einer Zeile. 

Das Problem liegt darin, dass dt und dd nicht wie üblich mit einem eigenen Container umgeben werden können, der für das Clearing benutzt werden kann. Der Trick liegt letztlich darin, mit Hilfe von »:after« ein Clearing nach dd zu erzwingen:

Damit erreicht man eine saubere Ausrichtung der beiden Elemente auf eine Zeile, wie das folgende Beispiel zeigt.

Achtung! Das Beispiel enthält einen kleinen Trick: die Linien zur Abgrenzung wurden oberhalb von dt und dd definiert (border-top), unterhalb (also border-bottom) geht nicht! Die floatenden dt-Elemente sind nämlich wie alle floatenden Boxen prinzipiell nur so hoch wie ihr Inhalt, was zur Konsequenz hat, dass in der dt-Spalte eine untere Linie immer direkt unter dem Text steht.

Dazu fällt mir nur ein, in diesem Fall eben border-bottom (und background) nicht zu verwenden. 

Der Safari-Browser greift für das Rendering der Seiten auf die sog. Webkit-Engine zu. Das bedeutet, dass es normalerweise keinen Sinn macht, unterschiedliche Safari-Versionen auf einem Mac zu betreiben. Auch wenn man einen älteren Safari startet, wird dieser auf das aktuelle Webkit zugreifen und die Seite so darstellen wie es Safari 4 tun würde. 

Eine elegante Lösung für das Problem bietet die Seite »Multi-Safari« von Michel Fortin. Er bietet dort spezielle Safariversionen für den Download an, die eine passende Webkit-Engine gleich mitbringen, gebundelt in der Applikation. So kann man auf einem Leopard-System alle Versionen von 2.0 aufwärts nebeneinander installieren und seine Seite bequem testen.