Horizontale Listen mit fester Breite in < IE7

[Ay Chiquita]

Hallo!

Ich habe mit CSS folgende ul- und li-Eigenschaften definiert:

ul {
list-style: none;
}

ul li {
display: inline;
line-height: 21px;
margin: 0 0 0 10px;
}

Und nun habe ich eine weitere CSS-Klasse hinzugefügt, die für ein li-Element eine feste Breite einstellen soll:

ul li.left150 {
display: block;
float: left;
margin: 0;
width: 150px;
}

Das war damals ein Workaround um den Bug in < IE7 zu fixen. Allerdings wollte ich nun mehrere horizontale li's mit der obigen Klasse nebeneinander anordnen und das scheint mal wieder Fehler im IE6 etc. zu verursachen. Im IE6 steht nach dem zweiten Element, das "left150" als Klasse benutzt, ein Zeilenumbruch. Wie kann das sein?

Hat jemand eine einfachere Lösung, wie ich horizontalen Listenelementen verschiedene Breiten so zuordnen kann, dass es in allen Browsern gleich aussieht?

Beste Grüße und vielen Dank für Eure Zeit!

 

[prm]

Mach's doch gleich mit float, jedoch unter Berücksichtigung des IE-Doubled-Float-Margin-Bug:

ul {
list-style: none;
}

ul li {
float: left;
width: 150px;
display: inline;
line-height: 21px;
margin: 0 0 0 10px;
}

Und bei verschiedenen Breiten: lass den width-Wert dann mal weg.

 

[Ay Chiquita]

Vielen Dank!

Da stand ich ein bisschen auf dem Schlauch.

 

[BRotondi]

Besten Dank für das Beispiel hier! Um HTML besser zu verstehen habe ich das mal ohne CSS implementiert und war fasziniert, dass es funktioniert :). Da der Threadtitel treffend ist, hinterlasse ich es mal als Beispiel:

<ul style="list-style: none;">
    <li style="float: left; width: 150px; display: inline; line-height: 21px; margin: 0 0 0 10px;">A</li>
    <li style="float: left; width: 150px; display: inline; line-height: 21px; margin: 0 0 0 10px;">B</li>
    <li style="float: left; width: 150px; display: inline; line-height: 21px; margin: 0 0 0 10px;">C</li>
</ul>

Für mich wichtig zu verstehen war, dass es nichts bringt, float: left; im ul style unterzubringen.

 

[Efchen]

Ohne CSS? In dem Beispielscode ist aber doch CSS enthalten.

 

[BRotondi]

Sorry, Dachte CSS nennt man nur

ul {
     list-style: none;
}

Google belehrt mich aber, dass

<ul style="list-style: none;">

unter Inline-CSS läuft. Merci für die Info! (Euch beiden :) )

... aber demnach bringt es beschränkt etwas, dies zu verstehen, da man das ja lassen soll ...

 

[Efchen]

Man soll es lassen, wenn man Inhalt und Layout strikt voneinander trennen will, und empfehlenswert ist das, weil dann die Wartung der Site um ein Vielfaches leichter wird.