Floating in IE6

[dArignac]

Hallo zusammen,

ich habe im IE6 ein Problem mit floatenden Divs.
Und zwar habe ich ein Element, dass durch folgendes HTML beschrieben ist:

<div><img ... />Text</div>

Dieser Div hat folgendes CSS:

float:left;
margin:3px 2px;
padding:1px 3px 0 1px;
white-space:nowrap;

Ich werfe jetzt mehrere (40+) dieser Div-Container ein einen bestehenden Container, der selber float:left hat und eine feste Größe. Im Firefox sieht alles super aus - die Elemente brechen richtig um, der Text steht immer auf einer Zeile mit dem Bild davor. Nur im IE6 nicht, da wird bei einigen Elementen, die nah am rechten Rand des Elterncontainers liegen, der Text auf eine neue Zeile umgebrochen, so dass in Zeile 1 das Bild ist, und in Zeile 2 der Text. Das zieht das Div-Element höher als es sollte. Habe probiert die Höhe festzusezten, aber das bringt auch nix.

Vielleicht weiss ja jemand einen Rat? Schonmal danke!

 

[Bernhard]

Hallo,

das ist der IE5/6 Doubled Float-Margin Bug...
(http://www.positioniseverything.net/explorer/doubled-margin.html)

gib dem gefloateten Element display:inline;, damit sollte alles gut sein...

Grüße
Bernhard

 

[Efchen]

Und zwar habe ich ein Element, dass durch folgendes HTML beschrieben ist:

<div><img ... />Text</div>

Exkurs:

Aus Sicht von HTML ist der Inhalt nicht ausreichend beschrieben. <div> gruppiert mehrere Elemente und ist das "allgemeine Block-Element". Du hast nicht mehrere Elemente, also was gruppierst Du?
Des weiteren ist "Text" nicht semantisch beschrieben. Was soll das sein?
Semantisch sinnvoll wäre dieser Code:

<p><img ... />Text</p>

Damit wäre der Inhalt ausreichend semantisch definiert.
Und aus Sicht von CSS verhalten sich beide Elemente gleich (also p wie div), weil beides Block-Elemente sind.
In Deinem Fall würde ich aber sogar noch einen Schritt weiter gehen, und das so machen:

<ul>
  <li><img ... />Text</li>
  <li><img ... />Text</li>
  ...
</ul>

Oder, wenn der Text eine Definition des Images ist, sogar eher noch so:

<dl>
  <dd><img ... /></dd>
  <dt>Text</dt>
  <dd><img ... /></dd>
  <dt>Text</dt>
</dl>

Semantische Grüße,
-Efchen

 

[dArignac]

@Bernhard
Das war auch mein erste Vermutung, display:inline bewirkt aber leider nichts.

@Efchen
Da hast du sicher recht, aber es ist nicht bei RIAs (und das ist nur ein kleiner Teil davon) nicht immer möglich, das HTML semantisch korrekt zu beschreiben. Aber danke für deinen Hinweis!

 

[Efchen]

...aber es ist nicht bei RIAs nicht immer möglich, das HTML semantisch korrekt zu beschreiben.

RIA wie in "Rich Internet Application"?

Wenn diese HTML & CSS zur Darstellung ihrer Inhalte nutzen, sehe ich keinen Grund dafür, warum man den Inhalt nicht semantisch korrekt auszeichnen kann. Aber vermutlich reicht da mein Wissen über RIA nicht aus, habe eben das erste Mal davon gelesen, vermute aber, dass das eher eine Philosophie ist, als eine Anwendung. In dem Fall wird das mit der Semantik sicher trotzdem funktionieren.

 

[neuroleptika]

Hallo dArignac,
ich habe deine Code-Schnipsel in einem html-Dokument zusammengefügt.
Deinen Fehler war im IE5.5- 6 nicht zu erkennen.

Zeige besser ein komplettes Beispiel in dem es nicht funktioniert.

 

[Loon3y]

So wie ich das ganze von dir sehe sind das ja immer die gleichen Zeichen (habe deinen ersten BEitrag nicht ganz durchgelesen und nur die Bilder angeschaut).

Wies nimmst du nicht, wie von Efchen vorgeschlagen eine Liste und bindest die Grafike als Background im <li> ein?

Das hätte sogar mehrere Vorteile und wie man weiß sollte man Bilder die nichts inhaltliches haben, in den Hintergrund einbinden.


Gruß
Loon3y

 

[dArignac]

Das Problem ist, dass sich das Bildelement auch mal mit einem Link austauschen kann, der muss klickbar sein, und damit scheidet die Background-Lösung leider aus.
Ich habe jetzt das Bild absolut positioniert und ausserhalb des Div-Containers geschoben, dann entsprechend die Margins der Divs angepasst. Das ist ähnlich der Lösung der Tagdarstellung in Wordpress. Dann funktioniert es auch mit dem IE6.
Einziges Problem dabei ist, dass wenn die Elemente in einem scrollbaren Container liegen, die absolut positionierten Bilder beim Scrollen nicht mitscrollen, da sie ja fest positioniert sind. Relative Positionierung führt wieder zum alten Problem im IE6.

 

[neuroleptika]

Wie gesagt,
ich habe dein Besipiel zusammengesetzt und der Fehler ist nicht aufgetreten.

 

[dArignac]

Dann probier mal bitte TEST :)

 

[_Thor_]

Da würde sich erstmal eine Fehlerbehebung anbieten [Invalid] Markup Validation of http://a36.zoe.vc/ - W3C Markup Validator und ein etwas aktuellerer Doctype wäre auch nicht schlecht, HTML 3.2 ist doch etwas sehr alt, probier es mit XHTML 1.0 strict

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

 

[neuroleptika]

Du floatest ja auch img:

div.tagitem [COLOR="DarkRed"][B]img[/B][/COLOR], .removetag {
float:left;
...
}

Das war aus deinem Beispiel nicht zu entnehmen.

Mit white-space:nowrap; kannst du nur Verindern, daß inline-Inhalte nicht umbrechen.
Floats ordnen sich nach der zur Verfügung stehenden Breite an.

 

[Efchen]

Das Problem ist, dass sich das Bildelement auch mal mit einem Link austauschen kann, der muss klickbar sein, und damit scheidet die Background-Lösung leider aus.

Nein. Warum?

Und was spricht jetzt eigentlich dagegen, den Inhalt semantisch korrekt auszuzeichnen?

 

[dArignac]

@Efchen
Weil man ein Hintergrundbild nicht klicken kann.
Generell hast du recht, semantisch korrekte Darstellung ist natürlich besser als keine. Ich habe dementsprechend alles umgebaut, der HTML-Code ist jetzt auch wesentlich einfacher geworden. Ich verwende die von dir vorgeschlagenen Listen-Elemente. Das Bild ist dann ohne Floating mit dem Attribute "align" und "left" richtig positioniert. Wie ich bereits sagte, kann das Bild auch ein Link sein, das habe ich jetzt ausgetauscht, so dass es auch nur ein Bild ist. Damit musste ich zwar die komplette Javascript-Logik anpassen, aber das ist ok, jetzt gefällt es mir strukturell auch besser.
De facto gibt es jetzt keine Probleme mehr und irgendwie ist alles einfacher. Vielen Dank für eure Hinweise und Hilfen :-)

 

[neuroleptika]

Das html-Attribut align ist quasi so etwas wie float auf html.
Das Brauchst du ein deinem Beispiel nicht.

 

[Efchen]

Weil man ein Hintergrundbild nicht klicken kann.

Das sagt wer?
Und was hat das mit der Semantik zu tun? Nichts.

Das Bild ist dann ohne Floating mit dem Attribute "align" und "left" richtig positioniert.

Attribute von HTML, die der Darstellung dienen, sollte man nicht benutzen. Trennung von Inhalt und Layout!
Das geht doch gut mit float!

Hier mal der Code vom anklickbaren Hintergrundbild. Wobei ich das so eh nicht machen würde, denn wenn das Hintergrundbild eigentlich klickbaren Content enthält, sollte es nicht als Hintegrundbild, sondern als <img> eingebunden werden, eben über HTML, weil HTML ja den Inhalt verwaltet.

<p><a href="clickableimage.html"></a></p>

p a {
  display:block;
  width:200px;
  height:320px;
}

 

[neuroleptika]

Mit display:block; für a würde aber float notwendig sein.
Was im IE6 wieder zum genannten Umbruch führt.
Background-image funktioniert auch auf display: inline;
Oder auch display: inline-block. (nicht im ff2!)

 

[Efchen]

Umbruch? Da muss ich wohl was überlesen haben.

 

[neuroleptika]

Umbruch ist nicht ganz glücklich ausgedrückt.
Darum ging es ursprünglich:

die Elemente brechen richtig um, der Text steht immer auf einer Zeile mit dem Bild davor. Nur im IE6 nicht..

Der Text rutschte (teilweise) unter das gefloatete img.