kick-image

Listen – ob geordnete oder ungeordnete – sind vielfach einsetzbare Elemente. In vielen Fällen semantisch korrekt, aber allemal praktisch zur Formatierung mit CSS.
Wären da nicht die unterschiedlichen Browserdarstellungen, vor allem im Zusammenhang mit der Eigenschaft “float”!

Fallbeispiel:
Ein Bild mit der Eigenschft “float:left”, daneben eine ungeordnete Liste.
<img src="bild.jpg" alt="" style="float:left; margin:0 10px 10px 0;" />
<ul>
<li>erstes Listenelement</li>
<li>zweites Listenelement</li>
</ul>

Das Ergebnis in den unterschiedlichen Browsern:

• bei so gut wie allen “Nicht Microsoft- Browser” liegen die “Bullets” (also die jedem Listenelement voranstehenden runden Markierungen) direkt auf dem Rand bzw. etwas innerhalb auf dem Bild.
• bei den “Microsoft Internet Explorer” rutschen die Bullets hingegen unter das Bild und sind somit nicht mehr sichtbar.
• Alle Ansichten sind nicht so wie erwartet / gewünscht, der definierte Abstand von 10px wirkt sich bei keinem Browser aus.

Warum ist das so?

Bei Listen “floatet” nicht die gesamte Liste, sondern der Listeninhalt. Ob sich die Bullets nun über oder unter dem Bild befinden macht kaum Unterschied…

Was kann man tun?

Damit die Liste als gesamte Einheit “floatet” benötigt sie einen eigenen “Block Formatting Context”. Dadurch wirkt sich das “float:left” nicht auf die Inhalte der Liste sondern auf die gesamte Liste aus.

Wie erreicht man das?

Hier kommt eine der wohl am wenigsten genutzten Eigenschaften ins Spiel: overflow.
Detailiertere Infos hierzu: http://www.w3.org/TR/CSS21/visuren.html#block-formatting
Mit einer Definition von “overflow” welche vom Default- Wert “visible” abweicht erhält das gesamte Element den besagten “Block Formatting Context” – die Liste befindet sich rechts vom Bild, alle Bullets sind zu sehen und das “margin-right” des Bildes wirkt.
<img src="bild.jpg" alt="" style="float:left; margin:0 10px 10px 0;" />
<ul style="overflow:auto;">
<li>erstes Listenelement</li>
<li>zweites Listenelement</li>
</ul>

Wäre da nicht der Microsoft Internet Explorer!

Wie nicht anders erwartet will der “Redmonder Möchtegern- Webseitendarsteller” eine Extra- Behandlung. Und da greift wieder einmal die diesbezügliche Spezial- Waffe “hasLayout” – siehe Posting hasLayout – Behebung vieler Darstellungsfehler im MSIE
In diesem Fall verwenden wir das Microsoft-proprietäre “zoom”.

Perfekt, wären da nicht – man glaubt es kaum – die Microsoft Internet Explorer unter der Version 7!
Da tut sich optisch noch nicht viel, ein “padding-left:25px” hilft aber, und wirkt sich bei den vielen anderen Browsern kaum aus!

Geschafft, und so sieht der Code unseres Beispieles dann aus:
<img src="bild.jpg" alt="" style="float:left; margin:0 10px 10px 0;" />
<ul style="overflow:auto; zoom:1; padding-left:25px;">
<li>erstes Listenelement</li>
<li>zweites Listenelement</li>
</ul>

Etwas “quick and dirty” und nicht ganz valide, mittels Conditional Comments lässt sich aber die CSS- Anweisung “zoom” auslagern, wird vom Validator also nicht analysiert und macht somit den Anschein von Validität – ein doch verschmerzbarer Kompromis!

• Montag, 09.02.2009, 18:00 Uhr
• Trackback-URL
• Permalink
• Tags: CSS