Liste mit CSS Einrücken

Hallo zusammen,

erstmal ja ich habe gegoogelt und auch alle möglichen Beiträge gelesen und nein padding und margin helfen mir nicht wirklich!

Ich habe:

<ol>
<li>Erste Zeile</li>
<li>Zweite Zeile</li>
</ol>

und

ol, li {
margin: 0;
padding: 0;
}

Was passiert: Die Nummerierung schiebt sich links aus dem Bild!

Was ich will: Nummerierung Bündig mit restlichem Text. Den Text hinter der Nummerierung nach wievor ausgerückt, deswegen ist inline auch nicht das richtige!

Wenn ich jetzt erst mal die Default Werte der Broweser (siehe oben) auf 0 setze und dann manuell margin-left: 20px setze, dann ist es bei Firefox richtig, aber bei IE um ein paar Pixel falsch! -.-

Was kann ich tun?

Vielen Dank im voraus

text-indent hilft leider auch nicht, da sich das nur auf die erste Zeile bezieht

----

Zitat von sejuma

text-indent zieht die Nummerierung mit ein.

Evtl. so?

Code

ol { list-style-position: inside; }

Ja auf den ersten Blick ist es ok, da die 1. z.B. dann wirklich links bündig ist, allerdings ist der Text dahinter dann nicht mehr in einem Block bei Zeilenümbrüchen, was ich aber haben möchte:

Zitat von Unregistriert

Was ich will: Nummerierung Bündig mit restlichem Text. Den Text hinter der Nummerierung nach wievor ausgerückt, deswegen ist inline auch nicht das richtige!

aber schonmal Danke für die Anregungen bisher, vllt. weiß jemand noch was? Vllt Kombinationen mit anderen Sachen?

Also ich hätte eine Möglichkeit allerdings funktioniert diese im IE erst ab Ver. 8 ....

Aber damit hättest du das was du willst:

ol {list-style:none;}  
ol li {counter-increment:test 1;}
ol li:before {content:counter(test)". ";}

Zitat von Macrosdesign

Also ich hätte eine Möglichkeit allerdings funktioniert diese im IE erst ab Ver. 8 ....

Aber damit hättest du das was du willst:

Code

ol {list-style:none;}  
ol li {counter-increment:test 1;}
ol li:before {content:counter(test)". ";}

Funktionier bei meinem IE8 auch nicht und unter Firefox werden dann auch die zweiten Zeilen nicht mit eingerückt.

---

Zitat

jepp, die Listenzeichen als HG-Bild einbinden.

Klappt browserübergreifend problemlos und der Listenpunkt kann ruhig 20 Zeilen haben. Durch das padding wird immer richtig eingerückt.

Wenn du das durchnummerieren willst brauchst du für jeden Listenpunkt ein anderes HG-Bild.
Reine Fleißarbeit also.

naja warum nimmt man dann nicht gleich eine Tabelle, mach es deutlich einfacher, schön ist es aber dennoch nicht. Außerdem ist die eigentliche Intention dass die Eingaben dynamisch von Benutzern eingegeben werden können und denen kann man sowas auch nicht zumuten!

Zitat

Ich rücke das immer mittels margin-left wieder ein.

das Problem ist hierbei das die Einrückung nicht Browserunabhängig ist. Habs jetzt aber so gemacht, dass es bei IE linksbündig ist und bei Firefox somit jetzt bisschen eingerückt ist, besser krieg ichs nicht hin! *unbefriedigend*