Aufzählungslisten neben float:left

Problem: Wenn eine Aufzählungsliste neben einem links-floatenden Element, wie z.B. einer Navi steht, werden die Aufzählungspunkte unter die floatende Box geschoben, wie das Folgende Beispiel verdeutlicht:

Beispiel 1

list-style-position:inside

Eine mögliche Lösung ist, die Aufzählungspunkte innerhalb des Textes darzustellen. Dazu muss die CSS-Angabe list-style-position:inside verwendet werden, wie es das 2. Beispiel verdeutlicht.

Beispiel 2

Von Visible abweichende Overflow-Werte

Eine weitere Möglichkeit wäre, die Block-Eigenschaften durch von eine von overflow:visible abweichende Angabe hervorzurufen. Möglich sind: hidden, scroll und auto. Wie du dir wahrscheinlich denken kannst, ist scroll dafür denkbar ungeeignet. bei hidden, wird der Inhalt z.B. bei einem zu langen Wort abgeschnitten. Deshalb würde ich overflow:auto bevorzugen. Dort wird im besagten Fall eine Scroll-Leiste eingeblendet. Anders als bei overflow:scroll, aber nur, wenn es wirklich nötig ist. Leider funktioniert die overflow - Variante nicht im IE. Firefox, Opera, Konqueror usw. haben damit jedoch keine Probleme

Beispiel 3

Workaround für den Internet Explorer

Aber auch für den IE kann man den gewünschten Effekt erzielen. Dazu muss man dem Element „Layout“ geben. Dies erreicht man mit einer Höhen- oder einer Breitenangabe. Nun ist es ja für flexible Layouts i.d.R. etwas unpraktisch, eine fixe Höhen- oder einer Breitenangabe zuzuweisen. Deshalb kann man sich hier die Tatsache zunutze machen, dass die IE ein Element bei overflow:visble vergrößert, statt den Inhalt über den Block hinausgehen zu lassen. Man kann also problemlos eine Angabe wie height:1em verwenden. So wird es auch im nachfolgenden Beispiel gemacht. Zusätzlich muss hier noch ein padding-left:2em für den IE festgelegt werden. Die Overflow-Angabe muss an dieser Stelle außerdem unbedingt verschwinden.

Beispiel 4 (nur für IE)

Kombination beider Techniken

Wie du wahrscheinlich im vorherigen Beispiel bemerkt hast, funktioniert die height-Methode nur im IE, während alle anderen Browser overflow interpretieren. Noch problematischer währe es, wenn beide Angaben gleichzeitig interpretiert würden. Deshalb währe es wohl am sinnvollsten, dem IE nur die height-Methode zu geben, während alle anderen Browser nur die Overflow-Eigenschaft bekommen. Für diese Aufgabe sind Kind-Selektor und Star-HTML-Hack bestens geeignet.:

* html ul {height:1em;}
html>body ul {overflow:auto;}
ul	{margin-left:0;
	padding-left:2.5em;}

Die 1. Angabe ist ist im Grunde sinnlos, da HTML kein Elternelement hat. Deshalb wird es von allen standardkonformen Browsern ignoriert. Die 2. Angabe nutzt die Tatsache aus, dass der IE den Kind-Selektor noch nicht kennt. Alle aktuellen Browser außer der IE interpretieren diese Angabe dagegen schon. Somit bekommt jeder Browser das, was er braucht. Im folgenden Beispiel werden beide Angaben kombiniert eingesetzt.

Beispiel 5

Beachte

In allen standardkonformen Browsern (Firefox, Opera, Konqueror) wird sich diesbezüglich wahrscheinlich nichts ändern. Allerdings bin ich mir nicht sicher, wie der IE 7 das Layout verarbeiten wird. Du solltest das Layout beim Erscheinen des IE 7 also gründlich durchchecken. Bleibt zu hoffen, dass er bei diesem Beispiel standardkonform arbeitet, also overflow:auto interpretiert, den Star-HTML-Hack dagegen nicht mehr. Ansonsten bleibt dir dort vielleicht nichts anderes übrig, als list-style-position:inside zu verwenden. Versuche es aber möglichst so einzusetzen, dass Firefox & co, weiterhin die gute alte overflow:auto- Methode bekommen.