Liste mit float im IE

[stephanbauer]

Hi zusammen,

ich habe ein Problem das ich nicht in den Griff bekomme.
Und zwar habe ich eine Liste mit einer Nummer in Klammern:

<ol>  
	<li><span class="eintrag"><a href="#link">Eintrag 1</a></span><span class="anzahl">(Anzahl)</span></li>  
	<li><span class="eintrag"><a href="#link">Eintrag 2</a></span><span class="anzahl">(Anzahl)</span></li>  
...  
</ol>

Nun will ich dass diese Nummern am rechten Rand, am besten bündig mit der ersten Zeile erscheinen:
1. Irgend ein langer text der (52)
___über mehrere Zeilen geht
2. Kurzer Text _______________(31)

Das habe ich nun auf verschiedene weisen probiert, leider macht der IE nie mit, da er die Nummer des Listeneintrags (1., 2., ...) immer komisch ausgibt.

  
.eintrag {  
display: block;  
width: 400px;  
float: left;  
}  
.anzahl {  
display: inline-block;  
float: left;  
}  
li {  
clear: both;  
}  

steht die Nummer des Listeneintrags im 8er genau in der Anzahl. Oder wenn man <span class="anzahl"> als erstes ausgibt mit

  
.eintrag {  
display:block;  
}  
.anzahl {  
display:inline-block;  
float: right;  
padding-left: 10px;  
}

verschwinden im 8er die Nummern komplett.
Weiss da jemand etwas womit das auch im IE 7 & 8 funktioniert?
Gruß und Dank
sb

[suit]

Weiss da jemand etwas womit das auch im IE 7 & 8 funktioniert?

Entscheide dich für "inline-block" oder "float" - beides zusammen "funzt nicht" da ein float automatisch eine block box erstellt und somit inline-block keine inline box mehr erzeugen kann.

Zudem: sobald du "inline-block" angibst, wirst du mit Elementen die als initiale Anzeigeeigenschaft list-item hatten, ein Problem bekommen, da Listenaufzählungspunkte (oder Ziffern) nur für Elemente vom Typ "list-item" vorgesehen sind.

[stephanbauer]

Hi, schon mal danke für die Antwort

Entscheide dich für "inline-block" oder "float" - beides zusammen "funzt nicht" da ein float automatisch eine block box erstellt und somit inline-block keine inline box mehr erzeugen kann.

leider funktioniert beides alleine auch nicht, habe beides zu "block" gemacht, gleiches Problem im IE.

[suit]

leider funktioniert beides alleine auch nicht, habe beides zu "block" gemacht, gleiches Problem im IE.

Lies bitte meinen Post nochmal: sämtliche Eigenschaften, die dafür sorgen, dass das Anzeigeverhalten von "list-item" abweicht, sorgen dafür, dass die Aufzählungszeichen nicht mehr funktionieren (sollten).

Auch wenn du es nicht glaubst: auch "block" weicht von "list-item" ab ;)

[stephanbauer]

Lies bitte meinen Post nochmal: sämtliche Eigenschaften, die dafür sorgen, dass das Anzeigeverhalten von "list-item" abweicht, sorgen dafür, dass die Aufzählungszeichen nicht mehr funktionieren (sollten).

Auch wenn du es nicht glaubst: auch "block" weicht von "list-item" ab ;)

Das ist der Unterschied zwischen uns, ich kann deinen Beitrag auch 10x lesen bzw. durch den Link gehen, das daraus zu deuten kann ich trotzdem nicht ;)
Aber auch egal, gibt es vielleicht eine andere Möglichkeit?
Sonst werde ich es wohl ohne Listen zu lösen versuchen müssen.

Gruß & Dank
sb

[suit]

Das ist der Unterschied zwischen uns, ich kann deinen Beitrag auch 10x lesen bzw. durch den Link gehen, das daraus zu deuten kann ich trotzdem nicht ;)
Aber auch egal, gibt es vielleicht eine andere Möglichkeit?

Das ist der Unterschied zwischen uns: ich kann deinen Beitrag 10x lesen und werde trotzdem nicht verstehen, was du eigentlich willst, da ich deine eigentliche Aufgabenstellung garnicht kenne :)

Sonst werde ich es wohl ohne Listen zu lösen versuchen müssen.

Die listen sind nicht dein Problem, scheinbar aber, dass du Listenaufzählungszeichen vor Elemente packen möchtest, die technisch keine Listen mehr sind.

[Gunnar Bittersmann]

@@stephanbauer:

nuqneH

<ol>

<li><span class="eintrag"><a href="#link">Eintrag 1</a></span><span class="anzahl">(Anzahl)</span></li>
<li><span class="eintrag"><a href="#link">Eintrag 2</a></span><span class="anzahl">(Anzahl)</span></li>
...
</ol>

>   
> Nun will ich dass diese Nummern am rechten Rand, am besten bündig mit der ersten Zeile erscheinen:  
> 1. Irgend ein langer text der (52)  
> \_\_\_über mehrere Zeilen geht  
> 2. Kurzer Text \_\_\_\_\_\_\_\_\_\_\_\_\_\_\_(31)  
  
Du könntest die Anzahl absolut ins padding des Listitems positionieren:  
  
~~~css
li  
{  
    position: relative;  
    padding-right: 3em; /* abhängig von der Größe der zu erwartenden Zahlen */  
}  
  
.anzahl  
{  
    position: absolute;  
    top: 0;  
    right: 0;  
}

span[@class="eintrag"] brauchst du nicht mehr. (Brauchtest du vorher auch nicht, du hattest doch die 'a'-Elemente.)

Qapla'

[stephanbauer]

Du könntest die Anzahl absolut ins padding des Listitems positionieren:

Hey super, danke!
Das war die Idee, die mir gefehlt hat.

Gruß
sb