IE-Bug: Umbruch-Verhalten bei <img> nach

[Cheatah]

Hi,

man nehme:

<div style="border:1px solid red;">
The quick brown fox jumps over the lazy dog. <img src="..." alt="">
</div>

Ist das IE-Fenster groß genug, um den Inhalt in einer Zeile zu verwalten, ist alles okay. Verkleinert man es, so dass nur das Bild nicht mehr hinpasst, wird das <div> zweizeilung und das Bild bricht in die nächste Zeile um - auch noch gut (denke ich).

Wenn man das Fenster jetzt noch weiter verkleinert, so dass der Umbruch "im  " stattfinden müsste, wird es merkwürdig[1]: Das <div> wird wieder einzeilig, das Bild befindet sich in dessen Rahmen, der Text wird oberhalb dessen dargestellt.

Ist das ein bekannter Bug?

Beheben kann man das Problem, indem man einfach irgend eines der   durch ein Whitespace ersetzt, oder indem man den <img>-Tag direkt an den Text angrenzen lässt. Das ganze passiert im Quirks- wie im Standards-Mode.

Cheatah

[1] sic!

[MudGuard]

Hi,

Ist das IE-Fenster groß genug, um den Inhalt in einer Zeile zu verwalten, ist alles okay. Verkleinert man es, so dass nur das Bild nicht mehr hinpasst, wird das <div> zweizeilung und das Bild bricht in die nächste Zeile um - auch noch gut (denke ich).
Wenn man das Fenster jetzt noch weiter verkleinert, so dass der Umbruch "im  " stattfinden müsste, wird es merkwürdig[1]: Das <div> wird wieder einzeilig, das Bild befindet sich in dessen Rahmen, der Text wird oberhalb dessen dargestellt.
Ist das ein bekannter Bug?

ja, der IE ist ein bekannter Bug ;-)

Schon mal mit Zerowidth-Joiner (200d)/Zerowidth-Nonjoiner(200c) probiert? Siehe http://www.unicode.org/charts/PDF/U2000.pdf.

cu,
Andreas

[Cheatah]

Hi,

ja, der IE ist ein bekannter Bug ;-)

jetzt wo Du's sagst ;-)

Schon mal mit Zerowidth-Joiner (200d)/Zerowidth-Nonjoiner(200c) probiert?

Ja; Du hattest diese Zeichen irgendwann in diesem Jahr schon mal erwähnt. In "unserem" Kontext (Active-X, welches zwei Active-X einbettet, die HTML einbetten - oder so ähnlich, ein furchtbares Konstrukt halt) werden sie leider wahlweise als Kästchen oder als Fragezeichen angezeigt. Da wir das Problem anders gelöst haben (geschickterer Einsatz von   kontra Whitespace), haben wir das aber auch nicht weiter verfolgt.

Cheatah

[Cybaer]

Hi,

Ist das ein bekannter Bug?

Also hier im Forum schon. Ob Microsoft es auch weiß: K.A. ;-)

Das gleiche Problem wurde auffällig, wenn man mit CSS eine Hintergrundgrafik links vom eigentlichen Inhalt erscheinen läßt (z.B. als Ersatz bei "Link-Icons" mit :before) und dann dieses Konstrukt am linken Rand ist: Das Hintergrundbild schiebt sich unter den Content.

Als Beispiel s. http://Coding.vampirehost.de/Linksign (Testseite, sowie Seite die selbst) im IE 6.

Workaround: unbekannt. :-(

Gruß, Cybaer

[Cheatah]

Hi,

Das gleiche Problem wurde auffällig, wenn man mit CSS eine Hintergrundgrafik links vom eigentlichen Inhalt erscheinen läßt (z.B. als Ersatz bei "Link-Icons" mit :before) und dann dieses Konstrukt am linken Rand ist: Das Hintergrundbild schiebt sich unter den Content.

Als Beispiel s. http://Coding.vampirehost.de/Linksign (Testseite, sowie Seite die selbst) im IE 6.

ich sehe das Problem, danke für die Info. Leider ist mir so auf Anhieb nicht ganz klar geworden, wie die Formatierung tatsächlich aussieht - der IE kann doch kein :before, oder irre ich da? Ist in den JavaScripts irgendwas Magisches versenkt (magicB4() scheint es nicht zu sein)? Wie sehen HTML- und CSS-Code für den IE _wirklich_ aus? :-)

Workaround: unbekannt. :-(

Wie so oft ... :-/

Übrigens: :before ist keine Anweisung, sondern ein Pseudo-Element *g*

Cheatah

[Cybaer]

Hi,

ich sehe das Problem, danke für die Info. Leider ist mir so auf Anhieb nicht ganz klar geworden, wie die Formatierung tatsächlich aussieht - der IE kann doch kein :before, oder irre ich da?

Nein. Welche Styles ich dafür verwende, ist ja auf eben der Seite beschrieben (in den Textareas mit den Link-Icon-CSS-Codes). ;-)

Ist in den JavaScripts irgendwas Magisches versenkt (magicB4() scheint es nicht zu sein)?

Nein, magicB4 ist für JavaScript zuständig, das nach dem Beginn des BODYs, aber vor dem normalen Content laufen soll.

In *magicGO* sind die Scripts für den Beginn der Seite (also den HEAD), und dort wird für den IE ein entsprechendes Stylesheet geladen. Vereinfacht:

// IE-Link-Icon-CSS laden
 if(doc_type=="Content" && is_ie && agt_ieVersion>=5 && agt_ieVersion<7) {
  document.writeln('<link rel="stylesheet" type="text/css" media="screen" href="coding2s.css">');
 }

Wie sehen HTML- und CSS-Code für den IE _wirklich_ aus? :-)

Für CSS-2-Browser:
 a.de:before       { content:url(img/de.gif); border:0px; }

Für IE-Browser:
 a.de              { background-image:url(img/de.gif); padding-left:20px; background-repeat:no-repeat; background-position:center left; border:0px; white-space:nowrap; }

Übrigens: :before ist keine Anweisung, sondern ein Pseudo-Element *g*

:) Schon klar ... ;-)

Gruß, Cybaer

[Cheatah]

Hi,

Nein. Welche Styles ich dafür verwende, ist ja auf eben der Seite beschrieben (in den Textareas mit den Link-Icon-CSS-Codes). ;-)

ich muss gestehen, dass ich da ob eines Mangels an bequemlichkeitsverhätschelnder Übersicht früh aufegegeben habe ;-)

Nein, magicB4 ist [...]
In *magicGO* sind [...]

Ah. Das "B4" klang stark nach einem Hinweis auf ":before" ...

Wie sehen HTML- und CSS-Code für den IE _wirklich_ aus? :-)
Für IE-Browser:
a.de              { background-image:url(img/de.gif); padding-left:20px; background-repeat:no-repeat; background-position:center left; border:0px; white-space:nowrap; }

Hm, mit ähnlichen Codes hatte ich bisher einwandfreie Erfolge. Liegt es eventuell am white-space?

Cheatah

[Cybaer]

Hi,

ich muss gestehen, dass ich da ob eines Mangels an bequemlichkeitsverhätschelnder Übersicht früh aufegegeben habe ;-)

Ist wie mit der hiesigen FAQ: Vor dem Nutzen muß man Lesen. ;-)

Andererseits: Eine Übersicht ist doch vorhanden?! "Beschreibung", "Software-Voraussetzungen", "Link zur Testseite" und sogar ein "Download-Link"! Stilistisch deutlich vom Fließtext getrennt, ganz oben auf der Seite und mit "Zusammenfassung" drüber. Was willst Du denn noch mehr? =:-)

Hm, mit ähnlichen Codes hatte ich bisher einwandfreie Erfolge.

Es betrifft auch nicht die IEs 5.x, nur den 6er - und eben nur, wenn das Element im Textfluß am linken Rand ist (vermutlich auch nur als Inline-Element?!). :-(

Wenn Du aber tatsächlich einen ähnlichen Code haben solltest, der nicht über diesen IE-6-Bug stolpert: Her damit! ;-)

Liegt es eventuell am white-space?

Nein. Aber ohne geht es auf jeden Fall schief, sobald im Element ein "-" enthalten ist (was in den Link-Beschreibungen doch öfters mal vorkommt). Denn dann bricht der IE im Element um, und das Element wird deutlich breiter und höher (mit entsprechenden Folgen für die Positionierung des Background-Images) ...

Gruß, Cybaer