Adriana Mikolaskova Nautsch: Gefloatete Elemente in einer Liste

Hallo,

ich habe möchte in einer Liste jeweils ein bild, welches links steht und von Text umflossen wird darstellen
<ul>
   <li><img.../><p>text</p></li>
   <li><img.../><p>text</p></li>
   ...
</ul>
wenn ich das Bild mit einem float:left formatiere, sieht das in den meisten Browsern so aus wie gewollt, im IE (5.2 für Mac) umfliessen aber auch die nachfolgenden listen-Elemente (<li>'s) das erste Bild, wenn der text weniger lang ist, als dass er sich über das ganze Bild umfliessen würde.

Ich habe durch einsetzen eines clear:left an diversen Stellen versucht, einen Umbruch zu erzwingen, hat aber nichts genützt
Gibt es eine Möglichkeit, ohne allzugrosse Trickserei die gewünschte Darstellung auch für den genannten IE zu erzeugen?

Danke und Gruss

Adriana

  1. Hallo,

    wenn ich das Bild mit einem float:left formatiere, sieht das in den meisten Browsern so aus wie gewollt, im IE (5.2 für Mac) umfliessen aber auch die nachfolgenden listen-Elemente (<li>'s) das erste Bild, wenn der text weniger lang ist, als dass er sich über das ganze Bild umfliessen würde.

    Wenn dieses nur auf den IE 5.2 für Mac zutrifft, wäre es mir ehrlich egal. Wer einen Mac hat und trotzdem den IE5.x benutzt hat Strafe verdient.(IMHO)

    Ich habe durch einsetzen eines clear:left an diversen Stellen versucht, einen Umbruch zu erzwingen, hat aber nichts genützt
    Gibt es eine Möglichkeit, ohne allzugrosse Trickserei die gewünschte Darstellung auch für den genannten IE zu erzeugen?

    AFAIK sollte ein li {clear:left;} das eigentlich in Deinem Sinn darstellen. Wenn das _nur_ im IE-Mac nicht funktioniert bin ich überfragt.
    Sind das die einzigen floats, die Du einsetzt?

    netten Tag
    ^da Powl

    --
    ===============================
    powl.hat-gar-keine-homepage.de/
    1. Hallo,
      vielen Dank! das löst das beschriebene Problem.

      AFAIK sollte ein li {clear:left;} das eigentlich in Deinem Sinn darstellen. Wenn das _nur_ im IE-Mac nicht funktioniert bin ich überfragt.
      Sind das die einzigen floats, die Du einsetzt?

      die ganze liste ist ein einem div, welches ein anderes div umfliesst.
      Die oben beschriebene Lösung habe ich auch schon gehabt, dann aber verworfen, weil mir nicht klar war, weshalb sich das clear:left im <li> auf die übergeordneten divs auswirkt...
      verkürzt sieht die ganze Struktur so aus:

      <div style="float:left";>...</div>
      <div><div>...die oben beschriebene Liste...</div></div>
      (das div mit der liste drin, umfliesst das erste nicht mehr, wenn ich li mit {clear:left;}formatiere)

      Weshalb wirkt sich das clear:left auch auf die übergeordneten Elemente aus?
      Müsste ich da irgendwo ein clear:none einsetzen, damit die übergeordneten floats wieder richtig funktionieren?

      Wenn ja, wo?
      Wenn nicht, wie kann ich trotz dem clear:left im <li>  erreichen, dass das erste div vom zweiten umflossen wird?

      Danke und Gruss

      Adriana