CSS-Problem: OL-Auflistung sieht ka**e aus

[Oliver]

Hallo,

ich erstelle mir gerade ein neues Template für mein Blog.

An und für sich funzt das auch ganz gut, aber per

Code: Select all

<ol>
<li />Eintrag1
<li />Eintrag2
</ol>

oder auch

Code: Select all

<ol>
<li>Eintrag1</li>
<li>Eintrag2</li>
</ol>

erstellte Listen sehen komisch aus:

http://blog.forum4winde.de/uploads/OL_Auflistung.jpg

Von 1. bis 9. ist alles ok, ab 10. fehlt das Leerzeichen zwischen der Zahl und dem darauf folgenden Text, der auf der Zahl folgende Punkt (z.B. 11.) 'rutscht' unter den Text, wie bei 26. im Bild sehr schön zu sehen ist.

Ich habe das Ganze, damit man überhaupt was von der Auflistung sieht (sie würde sonst quasi 'aus dem Rahmen fallen') , per

Code: Select all

ol {
    padding-left: 10px;
    margin-left: 10px;
}

in der CSS-Datei 'formatiert', aber wie kriege ich den Abstand da rein?

Was habe ich vergessen/übersehen/falsch gemacht?

Viele Grüße,

Oliver

[yellowled]

Ich habe das Ganze, damit man überhaupt was von der Auflistung sieht (sie würde sonst quasi 'aus dem Rahmen fallen') , per

Code: Select all

ol {
    padding-left: 10px;
    margin-left: 10px;
}

in der CSS-Datei 'formatiert', aber wie kriege ich den Abstand da rein?

Was habe ich vergessen/übersehen/falsch gemacht?

Dass man so den linken Rand bzw. das Padding der gesamten Liste formatiert. Den Abstand zwischen Bullet und Listentext solltest Du so zurechtgebogen bekommen:

Code: Select all

ol li {
   padding-left: 10px;
}

YL

[Oliver]

Danke Aber das war's leider auch nicht, sieht immer noch so aus, wie in dem Screenshot

Hast Du evtl. noch eine Idee, woran es liegen könnte? Ich weiß da echt nicht weiter, ärgere mich bestimmt schon 3 Tage nur mit den Listen herum, aber ich bekomme es nicht hin...

[Nachtrag] Ich hab's so eingebaut:

Code: Select all

ol li { 
   padding-left: 10px;
   margin-left: 10px;
}

Im Firefox sieht es jetzt so aus, wie es soll, schonmal ein Fortschritt

[yellowled]

Hast Du evtl. noch eine Idee, woran es liegen könnte? Ich weiß da echt nicht weiter, ärgere mich bestimmt schon 3 Tage nur mit den Listen herum, aber ich bekomme es nicht hin...

Nur anhand von Screenshots ist sowas schwierig zu diagnostizieren. Ideal wäre es, wenn man das Template in einem Blog, welches besagten Eintrag hat, begutachten könnte, ginge das?

[Nachtrag] Ich hab's so eingebaut:

Code: Select all

ol li { 
   padding-left: 10px;
   margin-left: 10px;
}

Im Firefox sieht es jetzt so aus, wie es soll, schonmal ein Fortschritt

Und wo nicht? (Ich ahne es.)

Brauchst Du den alten Code, der nur ol formatiert? Ansonsten mal probehalber raus damit. Helfen evtl. höhere Werte für padding-left? margin-left solltest Du eigentlich gar nicht brauchen, auch mal probehalber auskommentieren.

YL

[Oliver]

Und wo nicht? (Ich ahne es.)

Brauchst Du den alten Code, der nur ol formatiert? Ansonsten mal probehalber raus damit. Helfen evtl. höhere Werte für padding-left? margin-left solltest Du eigentlich gar nicht brauchen, auch mal probehalber auskommentieren.

YL

richtig geahnt, im Explorer

margin-left habe ich auskommentiert, die Erhöhung des padding-left-Wertes hat (im IE7) nichts gebracht.

Welchen alten Code meinst Du?

Wenn ich die UL/OL/LI-Formatierungen rausnehme, kippt die Liste quasi aus dem Rahmen, d.h. es werden weder Nummerierungen noch Bullets angezeigt und das ganze schiebst sich irgendwie weit nach links und ist nicht mehr mit den anderen Texten bündig...

[yellowled]

richtig geahnt, im Explorer

Quelle suprise. Hmpf.

Welchen alten Code meinst Du?

Wenn ich die UL/OL/LI-Formatierungen rausnehme, kippt die Liste quasi aus dem Rahmen, d.h. es werden weder Nummerierungen noch Bullets angezeigt und das ganze schiebst sich irgendwie weit nach links und ist nicht mehr mit den anderen Texten bündig...

Genau den meinte ich. Egal. Du könntest mal versuchen, für ol li den display-Typ zu ändern, also wahlweise display: inline; oder display: block; für ol li zu setzen (am besten beides mal ausprobieren). Ansonsten ...

YL

[Oliver]

Genau den meinte ich. Egal. Du könntest mal versuchen, für ol li den display-Typ zu ändern, also wahlweise display: inline; oder display: block; für ol li zu setzen (am besten beides mal ausprobieren). Ansonsten ...

YL

Funzt nicht. Aber macht nichts, werde mir was ausdenken. Danke Dir für Deine Hilfe

[yellowled]

Funzt nicht. Aber macht nichts, werde mir was ausdenken. Danke Dir für Deine Hilfe

Wenn Du magst, lege das Template gezippt irgendwo ab, dann gucke ich mir den Code mal über mein Testblog an. 4 Augen sehen mehr als 2.

YL

[Oliver]

Danke, das werde ich machen, den Link schicke ich Dir dann per PM