Olli: float in IE falsch dargestellt

Hallo,

ich habe folgendes Problem:
Ich möchte auf der linken Seite Text (ungeordnete Liste) haben, der um Bilder, die rechts positioniert sind, herumfließt. Es handelt sich um eine Chronik, die je nach Jahr unterschiedlich viele Listenpunkte hat, und nur teilweise ein Bild vorhanden ist. Eigentlich funktioniert das ja mit float, aber im Internet Explorer funktioniert das nicht, im Firefox schon. Also hier der entscheidende Code:

(head:)
<style type="text/css">
  li { position:relative; list-style-type:disc; line-height:2.4; }
  img { position:relative; float:right; right:0; top:0; }
</style>

(body:)
<dir>
 <li>1950</li>
 <br />
 <img src="Bild.jpg" alt="Bild" width="200" height="120" />
 <br />
 <li>Dieser Text soll um das Bild herumfließen</li>
 <li>Er soll nicht unterhalb dem Bild verlaufen</li>
</dir>

Was muss ich ändern, damit es funktioniert?

  1. Hi,

    Also hier der entscheidende Code:

    [...]

    <dir>

    <dir> ist deprecated bzw. existiert nicht (mehr). Verwende etwas anderes, z.B. <ul>, <ol> oder <dl>.

    <li>1950</li>
    <br />

    Das Content-Modell von <dir> lautet "(li)+". <br> ist nicht erlaubt, <img> ebenfalls nicht.

    Was muss ich ändern, damit es funktioniert?

    Schreibe zunächst einmal validen Code. Dann sehen wir weiter.

    Cheatah

    --
    X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
    X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
    X-Will-Answer-Email: No
    X-Please-Search-Archive-First: Absolutely Yes
    1. Da es auch mit ul nicht funktioniert, habe ich es jetzt folgendermaßen gemacht:

      <div>
       <p>1950</p>
       <ul>
        <img src="Bild.jpg" alt="Bild" width="200" height="120" />
        <li>Dieser Text flißt um das Bild herum</li>
        <li>Hier steht text</li>
       </ul>
      </div>

      So bin ich zufrieden und wenn keiner ne bessere Lösung hat, werde ich es dabei lassen.

      1. Korrigiere:

        <div>
         <p>1950</p>
         <img src="Bild.jpg" alt="Bild" width="200" height="120" />
         <ul>
          <li>Dieser Text flißt um das Bild herum</li>
          <li>Hier steht text</li>
         </ul>
        </div>

        Wie gut wenn man sich selber helfen kann ;)

      2. Hello,

        <ul>
          <img src="Bild.jpg" alt="Bild" width="200" height="120" />
        So bin ich zufrieden und wenn keiner ne bessere Lösung hat, werde ich es dabei lassen.

        das ist schön, dass du zufrieden bist. Nur bitte wäge sorgfältig ab, ob du zukünftige Darstellungsfehler mühselig suchen möchtest. Deine Dokumentstruktur ist immer noch invalide, damit schickst du den Browser in den Quirks-Mode. Wie dein CSS dann angewendet wird, kann kaum vorhergesagt werden und ist in den seltensten Fällen für verschiedene Browser deckungsgleich.

        MfG
        Rouven

        --
        -------------------
        sh:| fo:} ch:? rl:( br:& n4:{ ie:| mo:} va:) js:| de:] zu:| fl:( ss:) ls:& (SelfCode)
        He is entertaining both out of the car and in the car because if you tell him that a corner is almost flat then he is the guy who is going to try to take it flat even if it means shunting it the other side of it, he will come with the data and say 'hey, I may have crashed and destroyed the car, but I was flat-out'. That is an interesting quality that he has!  --  Team Member on Jacques Villeneuve
      3. Hi,

        So bin ich zufrieden und wenn keiner ne bessere Lösung hat, werde ich es dabei lassen.

        Hätte ich schon. Nur müsste ich dazu wissen, was Du genau auszeichnen willst, denn danach sollte sich die Wahl der HTML-Elemente richten.
        <p>1950</p> ist wohl kaum ein Textabsatz. Eher eine Überschrift oder ein Listenpunkt in einer mehrdimensionalen Liste. Vielleicht aber auch ein zu definierenden Ausdruck in einer dl.

        freundliche Grüße
        Ingo