nicht angemeldet
Komischer Bug in IE6.0
Hallo Freunde,
ich bin durch Zufall auf einen ganz esoterischen Bug in IE6.o gestossen. Im Detail:
Eine ganz normale HTML-Seite, darin ein <div> mit einer Hintergrundfarbe, definiert durch CSS.
In diesem <div> steht ein Text. Auf der rechten Seite soll ein Bild in den Text eingebettet sei.
Da ich schönen Code produzieren möche, mach ich Positionierung des Bildes natürlich auch über CSS: float: left; . So weit, so gut!
Das nächste Kapitel soll dann aber wieder die volle Seitenbreite zur Verfügung haben. Also füge ich ein <br clear:all> ein. Das ganze sieht dann etwa so aus:
-----------------------------------------------------------------------------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Wiered Bug in IE!</title>
<style>
#content {background : #ffffcc;}
.rightimage {float: right;}
</style>
</head>
<body>
<div id="content">
<h1>Bug!</h1>
<h2>Beschreibung</h2>
<img class="rightimage" src="anything.gif"
width="100px" height="100px" border="2" alt="Ein Bild!">
<p>
Das ist der Text, welcher eigendlich links
neben dem Bild stehen soll aber nicht gezeigt wird!<br>
Kann mir irgendwer sagen, WARUM?????<br>
Hinweis: Wenn ich dem Break mit "clear=all" weglasse
ODER der Text etwa gleich hoch ist wie das Bild, ist alles in Ordnung!
</p>
<br clear="all" />
<h2>Nächstes Kapitel, soll unterhalb des Bildes erscheinen.</h2>
<p>Text nach dem Break. Der wird wieder gezeigt!</p>
</div>
</body>
</html>
-
Fortsetzung, sorry, mein Finger fand die Enter-Tast zu schnell :-)
Wenn ich diese Seite in IE6.0 lade, dann wird der gesammte Text oberhalb von <br clear="all"> nicht angezeigt, WENN:
Das Bild höher als der danebenstehende Text ist! Wenn ich mehr Text einfüge, so das das ganze Bild von Text umgeben ist, dann ist alles i.O. Auch wenn ich das <br clear="all"> Tag weglasse geht alles. Ich kann auch einfach das Browser-Fenster so schmall machen, dass der Text über den unteren Bildrand hinausfliesst und alles ist gut.
Aber in der Konstellation wie oben geht nichts! BTW, keine Probleme mit Mozilla 0.0.6 oder NN6.1. Nur mit IE6.0 (Mir kommen aufmuternde Gedanken, in denen ein Herr names Bill und ein Paar schwere Wanderschuhe tragende Rollen spielen :->>> ).
Hat jemand von Euch den Bug schon mal gesehen. Und: HILFE!!! kennt jemand vielleicht einen Workaround?
Danke vorab
+peter+
-
Hallo, Peter!
Wenn ich mehr Text einfüge, so das das ganze Bild von Text umgeben ist, dann ist alles i.O.
Die eine Möglichkeit, das Problem zu umgehen, anstatt div eine blinde Tabelle zu nutzen. Das ist natürlich die schlechteste Möglichkeit.
Die andere Möglichkeit ist, wie du schon sagtest, den Text zu verlängern (bzw. das Bild zu verkleinern), und zwar entweder mit normalen Text oder durch mehrfaches "<br> ".
Wenn du den Text aber nicht verlängern möchtest, dann benutze:
<p style="height:100px;">Das ist der Text, ...
So wird die Box des Absatzes ungeachtet von der Länge des Textes auf die Größe der Grafik (hier 100px) gebracht und das Problem tritt nicht auf.Andere Auswege habe ich leider nicht gefunden.
Hat jemand von Euch den Bug schon mal gesehen.
Der ist mir schon irgendwo einmal begegnet. Durch mehrfaches markieren des unsichtbaren Textes oder durch [STRG]+[A] oder durch [ALT]+[TAB] (zu einem anderen Fenster und wieder zurück zum IE schalten), kann man den Text temporär sichtbar machen.
Noch ein paar generelle Hinweise, die Fehler auslösen könnten, aber hier scheinbar nicht der Auslöser waren:
Nimm als Dokumenttypdefinition am Seitenanfang am besten bei HTML 4.01 Transitional folgendes:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Dann schaltet IE in den Konformitätsmodus, nicht in den Kompatibilitätsmodus. Dies weist den IE an, das Box-Modell gemäß W3C-Vereinbarungen zu rendern.<img [...] width="100px" height="100px">
^^ Kann AFAIK unter Umständen Probleme
bereiten. Die Zahl wird im Falle von
Pixeln i.d.R. ohne Einheit notiert.<br clear="all" />
^ XHTML-Syntax in einem HTML 4.01-Dokument? ;)
Naja, auch mit style="clear:both;" im nächsten
Blockelement tritt der obige Fehler auf.Gruß,
Mathias-
Hallo Mathias,
ist ja tröstlich, dass ich nicht ganz gaga bin!
Ich werde mich wohl zu dem einen oder anderen workaround durchdringen müssen, auch wenn mir die ganze Sache stinkt!
Eigenlich sollte die ganze Site ja pures XHTML 1.0 strict werden, nur über CSS formatiert. Daher auch die, von Dir ja sofort entdeckte, XHTML Syntax. In NN und Mozilla geht ja auch alles, nur Klein und Weich muss mal wieder querschiessen!
Sei's drum, Danke und einen schönen Sonntag
+peter+
-
-
-
<div id="content">
<h1>Bug!</h1>
<h2>Beschreibung</h2>
<img class="rightimage" src="anything.gif"
width="100px" height="100px" border="2" alt="Ein Bild!"><p>
Das ist der Text, welcher eigendlich links
neben dem Bild stehen soll aber nicht gezeigt wird!<br>
Kann mir irgendwer sagen, WARUM?????<br>
Hinweis: Wenn ich dem Break mit "clear=all" weglasse
ODER der Text etwa gleich hoch ist wie das Bild, ist alles in Ordnung!
</p>ich hab hier kein Windos und daher auch keinen Internet Exploiter, aber was passiert wenn du das Bild in den Absatz reinverfrachtest statt davor? Achja, und mach das "..px" da wech. width und height akzeptieren einfach nur Zahlen.
-
<div id="content">
<h1>Bug!</h1>
<h2>Beschreibung</h2>
<img class="rightimage" src="anything.gif"
width="100px" height="100px" border="2" alt="Ein Bild!"><p>
Das ist der Text, welcher eigendlich links
</p>
ich hab hier kein Windos und daher auch keinen Internet Exploiter, aber was passiert wenn du das Bild in den Absatz reinverfrachtest statt davor? Achja, und mach das "..px" da wech. width und height akzeptieren einfach nur Zahlen.Das macht absolut keinen Unterschied!
Und das mit den "...px": Weiss ich wohl, aber im Stress ... dieser Mist-Bug hat mich jetzt zwei volle Tage gekostet! Möge die M$-entwickler der Schlag treffen!
-