nicht angemeldet
<ol> formatieren im IE
0 1 
Der Martin
0 
Gunnar Bittersmann
<ol> formatieren im IE
Hallo,
ich habe hier ein kleines Problem mit der Darstellung einer <ol> im IE.
Ich möchte den Abstand vom Aufzählungszeichen(1.,2.,3. etc.) zum Beginn des Textes formatieren da dieser im FF und IE unterschiedlich ist. Jetzt habe ich schon viel probiert (margin für ol und li einzeln bestimmen, das selbe mit padding, text-indent) aber komischerweise wirkt sich das alles nur im FF aus. Der IE mach da immer den selben Abstand hin. Wie kann ich diesen formatieren?
Ich verwende als DocType XHTML 1.0 Transitional. HTML ist in etwa so konstruiert:
<ul>
<li><h2>Head</h2>
<ul>
<li>text</li>
<li>text</li>
</ul>
</li>
<li><h2>Head2</h2>
<ul>
<li>text2</li>
<li>text2</li>
</ul>
</li>
</ul>
Vielen Dank schonmal für eure Tipps - Jan.
-
moinmoin
Jetzt habe ich schon viel probiert (margin für ol und li einzeln bestimmen, das selbe mit padding, text-indent)
und zwar was genau hast du probiert mit welchem Ergebnis
eine prima Einstiegsseite ist da zu finden (englisch, aber trotzdem leicht verständlich) http://www.smashingmagazine.com - mastering css coding getting started
ebenfalls immer wieder hilfreich ist http://www.web-toolbox.net und dort Untermenue *CSS-Techniken* (dritter Menuepunkt von oben)
Gruß Krischi
-
Hallo,
Ich möchte den Abstand vom Aufzählungszeichen(1.,2.,3. etc.) zum Beginn des Textes formatieren da dieser im FF und IE unterschiedlich ist.
Der erste Stolperstein bei der Listenformatierung ist, dass IE und FF die Einrückung unterschiedlich realisieren. Folgender Beispielcode zeigt das, indem die Größe der ol- und li-Elemente durch Rahmenlinien hervorgehoben werden:
ol { border: 1px solid #080; } li { border: 1px solid #800; }<ol> <li>Item 1</li> <li>Item 2</li> <li>Item 3 <ol> <li>Item 3.1<br>continued</li> <li>Item 3.2<br>continued</li> </ol></li> <li>Item 4 <ol> <li>Item 4.1<br>continued</li> <li>Item 4.2<br>continued</li> </ol></li> <li>Item 5</li> </ol>Darstellung im IE (links) und im FF (rechts):
Deutlich ist zu sehen, dass der IE die Einrückung durch margin-left der ol-Elemente macht und die Aufzählungszeichen (oder Nummern) außerhalb positioniert, während der FF die Einrückung mit einem padding-left beim ol realisiert und die Numerierung innerhalb des Elements positioniert. Es ist also zunächst hilfreich, sowohl padding als auch margin selbst zu setzen, um für beide Browserfamilien ein einheitliches Modell zu haben. Opera macht's übrigens auch nach dem IE-Modell (margin for ol), andere habe ich nicht getestet.
Jetzt habe ich schon viel probiert (margin für ol und li einzeln bestimmen, das selbe mit padding, text-indent) aber komischerweise wirkt sich das alles nur im FF aus. Der IE mach da immer den selben Abstand hin. Wie kann ich diesen formatieren?
Bei meinem Test hat padding-left für das li-Element gebracht, was du beschreibst: Es vergrößert den Abstand zwischen der Numerierung oder dem Bullet, indem der eigentliche Textinhalt des li weiter nach rechts rückt. Ich kriege den Abstand allerdings nicht kleiner, als es die Browser mit ihren Defaults setzen.
So long,
Martin--
Abraham sprach zu Bebraham: Kann i mal dei Cebra ham?
-
Deine Ausführungen lesen sich grade so, als würdest du list-style-position nicht kennen.
-
Hallo,
Deine Ausführungen lesen sich grade so, als würdest du list-style-position nicht kennen.
doch, kenne ich. Aber meines Wissens sind dafür nur die Werte "inside" und "outside" erlaubt. Das bringt mir also nichts, wenn ich die Position (besser gesagt, den Abstand zwischen Numerieung und Text) feiner justieren will. Oder hast du da eine konkrete Idee? Erlaubt list-style-position etwa auch eine numerische Angabe? http://www.w3.org/TR/CSS2/generate.html#propdef-list-style-position lässt jedenfalls keine zu.
So long,
Martin
-
-
Bei meinem Test hat padding-left für das li-Element gebracht, was du beschreibst: Es vergrößert den Abstand zwischen der Numerierung oder dem Bullet, indem der eigentliche Textinhalt des li weiter nach rechts rückt. Ich kriege den Abstand allerdings nicht kleiner, als es die Browser mit ihren Defaults setzen.
So long,
MartinHallo Martin,
vielen Dank für deinen Test. Den Abstand zum Bullet bekomme ich nur im FF kleiner indem ich text-indent: -x px; für die <li> angebe. Der IE kann oder mag das wohl nicht.
-
-
@@jkgallery:
nuqneH
Ich möchte den Abstand vom Aufzählungszeichen(1.,2.,3. etc.) zum Beginn des Textes formatieren da dieser im FF und IE unterschiedlich ist.
„Die Vorstellung, eine Webseite müsse bei allen Nutzern identisch aussehen, ist eine der schädlichsten im Webdesign. Löse dich von ihr.“ [icke:2009]
„... das ist wohl ein Grundfehler beim Webdesign: die Annahme, eine Webseite müsste bei jedem Nutzer gleich aussehen. Nein! Nein! Nein! Sie sollte bei jedem Nutzer _gut_ aussehen. Was ‚gut‘ heißt, kann von Nutzer zu Nutzer stark variieren. Bei kleinen Fenstern mag eine andere Anordnung der Elemente gut sein als bei großen.“ [icke:2007]
Jetzt habe ich schon viel probiert
Effizienter und effektiv wäre systematische Ursachenforschung gewesen.
Bei einer ungestylten Liste:
Firebug: 'ol' selektieren, im rechten Feld Reiter "Layout": Und schon ist zu erkennen, dass 'ol' kein margin, aber padding-left: 40px hat.
Internet Explorer Developer Toolbar: 'ol' selektieren, unter "current style" wird angezeigt: margin-left: 30px, kein padding.
Das sollte genügen um zu wissen, an welchen Werten du schrauben kannst.
Qapla'
--
Alle Menschen sind klug. Die einen vorher, die anderen nachher. (John Steinbeck)-
Ich möchte den Abstand vom Aufzählungszeichen(1.,2.,3. etc.) zum Beginn des Textes formatieren da dieser im FF und IE unterschiedlich ist.
„Die Vorstellung, eine Webseite müsse bei allen Nutzern identisch aussehen, ist eine der schädlichsten im Webdesign. Löse dich von ihr.“ [icke:2009]
„... das ist wohl ein Grundfehler beim Webdesign: die Annahme, eine Webseite müsste bei jedem Nutzer gleich aussehen. Nein! Nein! Nein! Sie sollte bei jedem Nutzer _gut_ aussehen. Was ‚gut‘ heißt, kann von Nutzer zu Nutzer stark variieren. Bei kleinen Fenstern mag eine andere Anordnung der Elemente gut sein als bei großen.“ [icke:2007]
Was hat dich jetzt gejuckt?
mfg Beat
--
><o(((°> ><o(((°>
<°)))o>< ><o(((°>o
Der Valigator leibt diese Fische-
@@Beat:
nuqneH
Was hat dich jetzt gejuckt?
Jetzt? ;-)
Qapla'
--
Alle Menschen sind klug. Die einen vorher, die anderen nachher. (John Steinbeck)
-
-
Bei einer ungestylten Liste:
Firebug: 'ol' selektieren, im rechten Feld Reiter "Layout": Und schon ist zu erkennen, dass 'ol' kein margin, aber padding-left: 40px hat.
Internet Explorer Developer Toolbar: 'ol' selektieren, unter "current style" wird angezeigt: margin-left: 30px, kein padding.
Das sollte genügen um zu wissen, an welchen Werten du schrauben kannst.
Qapla'
Vielen Dank für deinen Tipp. Ich meinte aber nicht die Einrückung einer <ol> zum Seitenrand hin, sondern den Abstand von der 1,2,3 etc. zum Beginn des Textes in der <li>. Den kann ich wie in einer anderen Antwort schon geschrieben im IE vergrößern aber eben nicht unter den default Wert verkleinern.
-