OLZU: Höhe von DIV (Unterschied IE <-> Gecko)

SELF-Forum

Höhe von DIV (Unterschied IE <-> Gecko)

OLZU
– Informationen zu den Bewertungsregeln

N'Abend.

Ich habe das Problem, daß ein DIV im MS-IE 6.0 anders
angezeigt wird, als es die GECKO-Engine (in Form von
Phoenix 0.5) macht...  :-(

Dieses DIV wird per CSS definiert:

div {
width:490px;
margin:auto;
text-align:left;
border-width:2px;
border-color:#FFFFFF;
border-style:solid;
padding:10px 5px 10px 5px;
}

Hier mein HTML-Code inklusive Inhalt des DIV:
[...]
<div>
<img src="bild.gif" style="width:118px;height:100px;margin-right:10px;float:left;"
alt="" ><p>Text, der aus ca. 3 Zeilen beseht...</p></div>
[...]

Der IE zeight mir hier ein DIV, das so hoch ist, daß
sowohl Bild als auch Text reinpassen und alles mit
einem schönen Rahmen versehen ist.

Der Phoenix passt die Höhe des DIV nur an den Text an,
das Bild schaut also aus diesem DIV hinaus.

Welcher Browser macht hier den Fehler??
Eine Variante muß ja wahrscheinlich richtig sein...
Wie schaffe ich es, daß auch in der Gecko-Engine die
Höhe des DIVs sich an den kompletten Inhalt (also auch
an das Bild) anpasst?

Für euere Antworten bereits jetzt vielen Dank.

Gruß
OLZU

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Höhe von DIV (Unterschied IE <-> Gecko)

    Sönke Tesch
    – Informationen zu den Bewertungsregeln

    Ich habe das Problem, daß ein DIV im MS-IE 6.0 anders
    angezeigt wird, als es die GECKO-Engine (in Form von
    Phoenix 0.5) macht...  :-(

    <div>
    <img src="bild.gif" style="width:118px;height:100px;margin-right:10px;float:left;"

    Der IE zeight mir hier ein DIV, das so hoch ist, daß
    sowohl Bild als auch Text reinpassen und alles mit
    einem schönen Rahmen versehen ist.

    Der Phoenix passt die Höhe des DIV nur an den Text an,
    das Bild schaut also aus diesem DIV hinaus.

    Welcher Browser macht hier den Fehler??

    Bei CSS-Fragen lautet die Antwort in 99 von 100 Fällen: Der IE macht es falsch, Gecko oder Opera richtig.

    Die Erklärung für Dein Problem ist folgende: Elemente, bei denen float gesetzt ist, fallen aus der normalen Layoutberechnung weitesgehend heraus, weshalb sich Dein umgebendes <div> dem ge-"float"-eten <img> auch nicht anpassen kann (bzw. darf). Siehe CSS-Doku: http://www.w3.org/TR/REC-CSS2/visuren.html#floats und insbesondere http://www.w3.org/TR/REC-CSS2/visudet.html#q17.

    Wie schaffe ich es, daß auch in der Gecko-Engine die
    Höhe des DIVs sich an den kompletten Inhalt (also auch
    an das Bild) anpasst?

    Setze am Ende des <div>s ein leeres Element, das mittels clear eine Position unter allen float-Elementen erzwingt.

    Gruß,
      soenk.e

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Höhe von DIV (Unterschied IE <-> Gecko)

      OLZU
      – Informationen zu den Bewertungsregeln

      Hallo Sönke,

      vielen Dank für deine Antwort, die Erklärung und die Links.
      Okay, auch diesmal war der IE schuld, aber trotzdem:
      Logisch ist das Verhalten von Gecko in diesem Fall IMHO trotzdem nicht
      (auch wenn es standardkonform ist).

      Setze am Ende des <div>s ein leeres Element, das mittels clear eine Position unter allen float-Elementen erzwingt.

      Nachdem ich endlich kapiert habe, daß dieses leere Element _innerhalb_ des DIV
      stehen muß (eigentlich logisch *g*) konnte ich so mein Problem lösen.
      Danke nochmals.

      Gruß,
        soenk.e

      Gruß zurück und einen schönen Sonntag,
      OLZU

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln