<ol> formatieren im IE

[Der Martin]

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