Fehlerhaftes float im Ausdruck unter Firefox

[CharlyF]

Hallo Forum,

ich habe ein recht simples HTML-Dokument, bestehend nur aus Überschriften und Absätzen. Kein Spaltenlayout, keine Besonderheiten.

Nun habe ich einige Bilder jeweils zwischen die Absätze eingefügt und möchte diese nach links oder rechts floaten. Eigentlich eine leichte Übung, also etwa so:

img.rechts {  
  float: right;  
  margin-left: 10px;  
}

Sieht im Firefox (also im Browserfenster) auch aus wie erwartet. Im Ausdruck zeigt sich ab Seite 2 (!) jedoch ein seltsames Verhalten. Die ersten drei Zeilen des dem Bild folgenden Absatzes haben nach wie vor 100% Breite und gehen mitten durch das Bild, ab der 4. Zeile verhält sich der Text so wie erwartet. Zwei Zeilen, die unterhalb des Bildes eigentlich wieder die volle Breite haben sollten, sind nach wie vor verkürzt. Es sieht aus, als sei das gefloatete Bild hochgerutscht.

Beispiel: http://www.frerichs-online.com/test1.html

Der IE6 ignoriert das komplette Umfliessen des Textes, was in diesem Fall allerdings besser aussieht, als wenn der Text mitten durchs Bild geht.

Kann mir bitte jemand sagen, was ich falsch mache?

[ChrisB]

Hi,

Sieht im Firefox (also im Browserfenster) auch aus wie erwartet. Im Ausdruck zeigt sich ab Seite 2 (!) jedoch ein seltsames Verhalten. Die ersten drei Zeilen des dem Bild folgenden Absatzes haben nach wie vor 100% Breite und gehen mitten durch das Bild, ab der 4. Zeile verhält sich der Text so wie erwartet.

Problem nachvollziehbar (FF 3.0.4/Vista).

Kann mir bitte jemand sagen, was ich falsch mache?

Dürfte wohl ein Bug sein - vielleicht eine Ausprägung von dem hier, Bug 392826 - Text overlaps floating image if they is in wrapper with padding

Ja, sieht stark danach aus - wenn du das padding-top von body entfernst, dann "stimmt" die Druckvorschau wieder.
Ersetze es ggf. durch ein margin-top für body.

MfG ChrisB

[CharlyF]

Danke Chris, dann geht es. Seltsam... (verstehen muss man das aber nicht, oder?)

Der IE6 macht es zwar dennoch falsch, allerdings kann ich damit leben. Über den hab ich mich schon genug aufgeregt und irgendwann sollte man aufhören mit der Abwärtskompatibilität.

Grüße, Charly

[Detlef G.]

Hallo CharlyF

Nun habe ich einige Bilder jeweils zwischen die Absätze eingefügt und möchte diese nach links oder rechts floaten.

Wenn die Bilder zwischen die Absätze gehören, dann sollten diese vielleicht auch zwischen den Absätzen angezeigt werden.
Oder anders herum:
So wie die Bilder vom Text umflossen werden, nehme ich an, dass diese auch zum Absatz gehören. Dann sollten sie sich im Absatz selbst befinden.

<p>… non ipsum. Curabitur tincidunt aliquet urna. Nulla  
facilisi. Donec a ligula.</p>  
  
<p><img class="rechts" src="haus4.jpg" width="288" height="218" border="0" alt="">  
Aenean fringilla, purus sodales pharetra volutpat, …  
</p>

Es sieht aus, als sei das gefloatete Bild hochgerutscht.

Wie ChrisB bereits schrieb, scheint das wirklich ein Bug zu sein.

Kann mir bitte jemand sagen, was ich falsch mache?

Wenn die Bilder im Absatz sind, tritt der Fehler bei mir (FF 3.0.12 WinXP) nicht auf.

Auf Wiederlesen
Detlef

[CharlyF]

Wenn die Bilder im Absatz sind, tritt der Fehler bei mir (FF 3.0.12 WinXP) nicht auf.

Hallo Detlef,

hab's ausprobiert. Stimmt, dann geht's auch.

Wenn ich die Theorie aber richtig verstanden habe, wird das Bild per float aus dem Dokumentenfluß herausgenommen und von den nachfolgenden Elementen umflossen. Demnach sollte man doch der Logik nach das Bild ausserhalb des Absatzes platzieren, und zwar davor.

Oder?

Aber Hauptsache, es geht jetzt. Danke.

Grüße, Charly

[Detlef G.]

Hallo Charly

Wenn ich die Theorie aber richtig verstanden habe, wird das Bild per float aus dem Dokumentenfluß herausgenommen und von den nachfolgenden Elementen umflossen.

Von nachfolgendem Text und Inlineelementen wird es umflossen. Auf nachfolgende Blockelemente hat es keinen Einfluss (außer diese bilden einen Block formatting contexts)

Demnach sollte man doch der Logik nach das Bild ausserhalb des Absatzes platzieren, und zwar davor.

Nein, du zäumst das Pferd von hinten auf.
Nicht die gewünschte visuelle Darstellung bestimmt die HTML-Struktur, sondern die logische Struktur des Dokuments, egal ob überhaupt und wie es dann mittels CSS formatiert werden soll.
Dafür, wo das Bild im HTML platziert wird, ist es egal, ob es dann normal angezeigt, gefloated, mittels position wild über die Seite geschoben oder gar ausgeblendet wird. Entscheidend ist nur, wo es von der Struktur des Inhalts hin gehört.
Also, gehört es zum jeweiligen Absatz, rein in diesen.
Soll es nur ein grafischer Absatztrenner sein, dann nicht (dann allerdings in der Regel auch überhaupt nicht ins HTML).

Übrigens, warum dies?:

* {  
overflow:visible !important;  
}

Auf Wiederlesen
Detlef