molily: MSIE: Text verschwindet bei float und clear

Beitrag lesen

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