MSIE: Text verschwindet bei float und clear

[molily]

Hallo,

http://molily.de/temp/msie-float-clear.html

Wenn ich dieses Beispieldokument im MSIE 6 lade, wird der Text teilweise nicht angezeigt. Das heißt, er wird für einige Millisekunden angezeigt und verschwindet dann. Wenn ich herunterscrolle und wieder hoch, kommt er zum Vorschein, ebenso, wenn ich die Fenstergröße ändere. Ein weiteres Problem ist, dass das margin-left des Container-Divs ignoriert wird. Der Inhalt beginnt zwar an der richtigen Stelle, aber der Hintergrund wird bis zum linken Fensterrand ausgedehnt. Das tritt verallgemeinert gesehen nicht immer sofort auf, sondern manchmal auch erst nach Ändern der Schriftgröße. Zwischendrin gibt es sporadisch Anzeigefehler, etwa dass die Hälfte der letzten Zeile eines Textabsatzes neben einer floatenden Grafik fehlt.

<img src="http://molily.de/temp/msie-float-clear.png" border="0" alt="">

Diese Fehler liegen meinen Untersuchungen nach am clear für die Überschriften. Wie IE 5.x reagieren, weiß ich nicht, die ieCapture-Screenshots zeigen den Text zumindest an, wobei IE 5.5 das Problem mit dem auf die Gesamtlänge verbreiterten Hintergrund zeigt.

Ich bin auf folgende Möglichkeiten gekommen, die Fehler zu umgehen:
http://molily.de/temp/msie-float-clear2.html

Für das Problem des verschwindenden Textes:
* html #a, * html .bildlinks, * html .bildrechts {position:relative;}

Für das Problem des verbreiterten Hintergrunds:
* html #a {zoom:100%;}
(Jaja, ich weiß, zoom ist nicht standardisiert. Mit dem einen Validitätsfehler im Stylesheet kann ich leben, wenn die Seite ansonsten nicht einmal lesbar wäre.)

Bzw. folgendes, weil sich die Fehler am besten gleichzeitig lösen, dann fällt ein z-index beim links im margin-Bereich erscheinenden Inhalt weg, das durch das position:relative nötig wäre etc. pp.:
* html #a {position:relative; zoom:100%;}

Soweit habe ich keine Nebenwirkungen bemerkt. Das löst auch im MSIE 5.5 das Hintergrund-Problem, führt aber dazu, dass es 5.01 plötzlich bekommt (wenn ich den Screenshots Glauben schenke). Damit könnte ich leben, lieber 5.01 als 5.5 betroffen.

Sind diese Fehler bekannt und gibt es bessere Lösungen bzw. wie verhält sich die obige Testseite in euren MSIEs?

Mathias

[Fritz]

Hallo Mathias,

... Sind diese Fehler bekannt ... bzw. wie verhält sich die obige Testseite in euren MSIEs?

Obwohl ich nicht viel beitragen kann: vielleicht bist Du ja auch dankbar für eine Bestätigung:
Ja, das float-clear Problem auf Deiner Beispielseite tritt bei mir (IE 6 Win98) genau wie von Dir beschrieben auf. Und der hack löst es.
Ich hab selbst lange mit fast dem gleichen Phänomen gekämpft - bei mir verschwanden Zeilen beim Scrollen innerhalb des angezeigten Bereichs, und tauchten beim Weiterscrollen wieder auf, grad, als ob ein Streifen auf dem Bildschirm für Text undurchsichtig wäre.
Hab leider nach langem rumprobieren aufgegeben, und anstelle von float-clear Tabellen eingesetzt. Den von Dir beschriebenen Hack (das ist wohl der Tan-hack) kannte ich damals noch nicht.

Aber ich werd bei Gelegenheit darauf zurück kommen.
Danke für Deinen Beitrag

Gruß Fritz

[Detlef G.]

Hallo Mathias

Sind diese Fehler bekannt und gibt es bessere Lösungen bzw. wie verhält sich die obige Testseite in euren MSIEs?

Bei mir IE 6.0 W98 konnte ich keinen Fehler feststellen.

MFG
Detlef

[Jan H.]

Hallo molily,

Wenn ich dieses Beispieldokument im MSIE 6 lade, wird der Text teilweise nicht angezeigt.

Das problem hatte ich auch mal, in einer testseite, es lag daran, das ich auch solche dummy <img>s verwendet habe:
<img width="150" height="150" alt="" />
Als ich ein existierendes bild eingesetzt habe war alles richtig zusehen.
Ein anderer grund war einmal padding:...; mit einer bottom angabe, in verbindung mit float des nachfolgeelementes, mit dem ergebnis das der text in diesem element im IE auch nur nach einem reload bzw veränderung der grösse des fensters zu sehen war.

Ein weiteres Problem ist, dass das margin-left des Container-Divs ignoriert wird. Der Inhalt beginnt zwar an der richtigen Stelle, aber der Hintergrund wird bis zum linken Fensterrand ausgedehnt.

Aber wenn du margin:10em; angibst klappt es, oder?

Das habe ich auch noch nie verstanden, in einem speziellen fall hatte ich dann einfach dem <div> float:right; und width;80%; gegeben,  aber dass kann man ja nicht als vollwertigen ersatz nehmen das es sich so ja doch etwas anders verhält als mit margin-left aber wenn es die ganze konstrucktion zulässt, warum nicht.

Jan aus Dresden

[molily]

Hallo,

Wenn ich dieses Beispieldokument im MSIE 6 lade, wird der Text teilweise nicht angezeigt.
Das problem hatte ich auch mal, in einer testseite, es lag daran, das ich auch solche dummy <img>s verwendet habe:
<img width="150" height="150" alt="" />
Als ich ein existierendes bild eingesetzt habe war alles richtig zusehen.

Ich bin auf das Problem durch eine Seite gekommen, auf der ich vollwertige Grafiken eingesetzt habe. Ich habe die Testseite jetzt geändert, das Problem tritt trotzdem auf. Das hat also meinen Untersuchungen nach keinen Einfluss.

Ein anderer grund war einmal padding:...; mit einer bottom angabe, in verbindung mit float des nachfolgeelementes, mit dem ergebnis das der text in diesem element im IE auch nur nach einem reload bzw veränderung der grösse des fensters zu sehen war.

Hm, ich verwende eigentlich nirgendwo padding bzw. bei #a hat das padding keinen Einfluss auf den Fehler.

Ein weiteres Problem ist, dass das margin-left des Container-Divs ignoriert wird. Der Inhalt beginnt zwar an der richtigen Stelle, aber der Hintergrund wird bis zum linken Fensterrand ausgedehnt.
Aber wenn du margin:10em; angibst klappt es, oder?

Nein, dann wird der linke margin-Raum trotzdem in der Hintergrundfarbe gefärbt.

Das habe ich auch noch nie verstanden, in einem speziellen fall hatte ich dann einfach dem <div> float:right; und width;80%; gegeben,  aber dass kann man ja nicht als vollwertigen ersatz nehmen das es sich so ja doch etwas anders verhält als mit margin-left aber wenn es die ganze konstrucktion zulässt, warum nicht.

Das ist an sich eine gute Idee, nur möchte ich nicht mit Prozentwerten arbeiten, weil die linke Spalte (die dann mit float:left und width:20%; vor der rechten stünde) dann unter Umständen zu kurz werden könnte (und bei größeren Viewport-Breiten unverhältnismäßig breit). Statt des paddings müsste ich dann den Elementen in den Containern mehr margin geben oder Extra-Divs einfügen. Solche Umstände hatte ich bis jetzt vermeiden können.

Auf http://www.positioniseverything.net/explorer/peekaboo.html habe ich übrigens noch eine weitere Möglichkeit gefunden: Die ausdrückliche Angabe von height (oder width).

* html #a {height:1px;}

Das löst beide Probleme. MSIE vergrößert die Box bekanntlich, wenn der Inhalt zu lang wird, anstatt den Inhalt gemäß overflow:visible aus der Box herausragen zu lassen.
Dort ist auch die position:relative-Lösung aufgelistet, auf die ich auch gekommen war. Das dort genannte line-height löst zumindest das Problem des verschwindenden Textes.

Mathias

[MudGuard]

Hi,

Diese Fehler liegen meinen Untersuchungen nach am clear für die Überschriften. Wie IE 5.x reagieren, weiß ich nicht, die ieCapture-Screenshots zeigen den Text zumindest an, wobei IE 5.5 das Problem mit dem auf die Gesamtlänge verbreiterten Hintergrund zeigt.

Ich hätte jetzt eher auf den inkorrekten Code als Fehlerursache getippt (habs aber nicht nachgeprüft).

Du gibst float für die divs der Klasse bildlinks an.
Für diese divs gibt es aber keine explizite Breitenangabe.

float erfordert aber eine explizite Breitenangabe - Ausnahme: Elemente, die eine implizite Breite haben (z.B. Bilder).

Siehe http://www.w3.org/TR/REC-CSS2/visuren.html#floats, 2. Absatz unter 9.5

cu,
Andreas

[molily]

Hallo,

Diese Fehler liegen meinen Untersuchungen nach am clear für die Überschriften. Wie IE 5.x reagieren, weiß ich nicht, die ieCapture-Screenshots zeigen den Text zumindest an, wobei IE 5.5 das Problem mit dem auf die Gesamtlänge verbreiterten Hintergrund zeigt.

Ich hätte jetzt eher auf den inkorrekten Code als Fehlerursache getippt (habs aber nicht nachgeprüft).

Ich schon. Es liegt nicht daran. Meinen Tests nach hat dies, zumindest in dem Kontext, in dem ich es einsetze, keine negativen Auswirkungen.

Anders als auf der Beispielseite variiert die Breite der Elemente, die der Klassen bildlinks bzw. bildrechts angehören, letztendlich. Es wäre natürlich möglich, allen Elementen, die diese Klassen verwenden, ein style-Attribut mit der Breite der jeweiligen Grafik zuzuweisen, wenn ich Lust auf den Zusatzaufwand und die Inline-Styles hätte.

Du gibst float für die divs der Klasse bildlinks an.
Für diese divs gibt es aber keine explizite Breitenangabe.

Das ist mir bewusst. Dazu habe ich mich bereits in </archiv/2004/3/76070/#m438811> geäußert.

Mathias