Merkwürdiges DIV Phänomen

[uwe]

Hallo zusammen

Im Moment bin ich gerade dabei, ein Design, das ausschließlich auf verschachtelten DIV's basiert, umzusetzen. Dabei bin ich auf ein merkwürdiges Verhalten des IE6 gestoßen. Grundsätzlich läuft es darauf hinaus, daß

<div>
<div>
  <div></div>
  <div></div>
</div></div>

in allen Browsern korrekt dargestellt wird (man achte auf die letzte Zeile), während

<div>
<div>
  <div></div>
  <div></div>
</div>
</div>

beim Internet Explorer das Verschieben eines DIV's um 4 Pixel nach unten zur Folge hat. Darauf gestoßen bin ich, als ich auf die Schnelle in Notepad am Code rumgeschraubt habe. Ursprünglich hatte ich vermutet, daß dort irgendwo ein unsichtbares CR/LF eingefügt wird, aber dem ist nicht so. Mal abgesehen davon, daß das auch keine Auswirkungen haben dürfte.

Ist jemand schon mal über dieses Verhalten gestolpert? Mich hat das mehrere Stunden gekostet, bevor ich endlich den Knackpunkt gefunden hatte.

Danke

Uwe
Portland, OR

PS: Kann im Moment leider keine Beispielseite posten, weil ich meinen ISP zum Teufel gejagt habe.

[MudGuard]

Hi,

</div>
</div>

Befindet sich zwischen den beiden schließenden Tags ausschließlich ein einziger Zeilenumbruch oder befindet sich dort noch irgendein anderer Whitespace (Leerzeichen, Tab, ...)?

cu,
Andreas

[uwe]

Hi Andreas

Befindet sich zwischen den beiden schließenden Tags ausschließlich ein einziger Zeilenumbruch oder befindet sich dort noch irgendein anderer Whitespace (Leerzeichen, Tab, ...)?

Das hatte ich auch erst vermutet und überprüft, aber dort ist nur ein einziger Zeilenumbruch und sonst nichts. Warum der IE in diesem speziellen Fall das CR/LF falsch interpretiert, ist mir schlichtweg ein Rätsel. An anderer Stelle im Dokument sind die schließenden DIV Tags auch als

</div>
</div>

formatiert, ohne daß das irgend welche Auswirkungen hätte.

Cheers

Uwe
Portland, OR

[wahsaga]

hi,

Im Moment bin ich gerade dabei, ein Design, das ausschließlich auf verschachtelten DIV's basiert, umzusetzen.

so weit, so schlecht.
sowas bezeichnet man idR. als "tag soup" - eine logische struktur drückt das ja kaum aus.
du solltest stattdessen versuchen, den inhalt semantisch auszuzeichnen - überschriften, absätze, listen, etc.
alles in divs zu packen, ist auch nicht besser, als tabellen zum layouten zu missbrauchen.

<div>
<div>
  <div></div>
  <div></div>
</div></div>

in allen Browsern korrekt dargestellt wird (man achte auf die letzte Zeile), während

<div>
<div>
  <div></div>
  <div></div>
</div>
</div>

beim Internet Explorer das Verschieben eines DIV's um 4 Pixel nach unten zur Folge hat.

ja, der IE neigt dazu, white-space wie beispielsweise zeilenumbrüche falsch zu interpretieren.

Ursprünglich hatte ich vermutet, daß dort irgendwo ein unsichtbares CR/LF eingefügt wird, aber dem ist nicht so.

also

</div></div>

und

</div>
</div>

unterscheiden sich doch wohl sehr deutlich? - und zwar eben um einen zeilenumbruch.

Mal abgesehen davon, daß das auch keine Auswirkungen haben dürfte.

zwischen "dürfte" und "IE macht" gibt es manchmal nun mal unterschiede.

gruß,
wahsaga

[uwe]

Hi wahsaga

so weit, so schlecht. sowas bezeichnet man idR. als "tag soup" - eine logische struktur drückt das ja kaum aus.

Quatsch, erstens weißt du überhaupt nicht, wie das Gesamtdesign aussieht, und zweitens war das nur ein extrem vereinfachtes Beispiel, um zu zeigen worum es geht.

unterscheiden sich doch wohl sehr deutlich? - und zwar eben um einen zeilenumbruch.

Dann erkläre mir bitte mal, warum an der einen Stelle der Zeilenumbruch interpretiert wird, aber an anderer Stelle der Seite dasselbe

</div>
</div>

keinerlei Auswirkungen hat. Wie ich schon an Andreas schrieb, hatte ich erst einen Whitespace in Verdacht, aber dem war leider nicht so. Für mich ergibt das irgendwie keinen Sinn.

zwischen "dürfte" und "IE macht" gibt es manchmal nun mal unterschiede.

Das ist wohl wahr ...

Danke

Uwe
Portland, OR

[wahsaga]

hi,

Quatsch, erstens weißt du überhaupt nicht, wie das Gesamtdesign aussieht,

wie denn auch?

und zweitens war das nur ein extrem vereinfachtes Beispiel

ja dann sag das doch auch.

deine ursprüngliche aussage,

Im Moment bin ich gerade dabei, ein Design, das ausschließlich auf verschachtelten DIV's basiert, umzusetzen.

las sich nun mal so.

gruß,
wahsaga

[uwe]

Hi wahsaga

Sorry, falls ich falsch rübergekommen sein sollte - war nicht meine Absicht. Eigentlich war ich davon ausgegangen, daß es aufgrund der Einfachheit klar ist, daß mein Beispiel nicht der tatsächlichen Struktur entsprechen kann.

Tja, scheinbar handelt es sich wohl um einen IE Bug, falls die Information von klawischnigg korrekt ist. Allerdings habe ich noch nie davon gehört. In der Zwischenzeit habe ich mal einige Newsgroups durchforstet und bin dabei auf etwas gestoßen, was das merkwürdige Verhalten ebenfalls erklären könnte. So wie es aussieht, kann es in Notepad passieren, daß statt des (unter Windows) für einen Line Break notwendigen CRLF Paares die Zeile nur mit einem CR oder nur mit einem LF abgeschlossen wird. Warum trotzdem ein Line Break angezeigt wird, erschließt sich mir zwar nicht so ganz, aber dann würde zumindest das Fehlverhalten des IE Sinn machen.

Cheers

Uwe
Portland, OR

[klawischnigg]

ja, der IE neigt dazu, white-space wie beispielsweise zeilenumbrüche falsch zu interpretieren.

kann ja sein, aber das hat mit diesem Problem nichts zu tun. Der Effekt kann auch auftreten, wenn zwischen den div-Tags bspw. ein input-tag ist, ohne irgendwelche Spaces oder <br>s. Ich bin darauf gestoßen als ich mit einem Kunden gestritten habe, der behauptete, dass ihm die Eingabefelder seines cms immer wieder davonfahren und sogar aus dem Rahmen 'rausfallen. Nachdem ich den IE nur zur oberflächlichen Designkontrolle verwende und damit keine Funktionsprüfung durchgeführt habe, hab ich es selbst nicht bemerkt, bin aber dann d'raufgekommen, dass eindeutig ein (völlig korrekt) verschachteltes DIV dafür verantwortlich war...

[uwe]

Der Effekt kann auch auftreten, wenn zwischen den div-Tags bspw. ein input-tag ist...

Bei mir ist es ein simpler <img> Tag.

Uwe

[klawischnigg]

Hallo zusammen

Im Moment bin ich gerade dabei, ein Design, das ausschließlich auf verschachtelten DIV's basiert, umzusetzen. Dabei bin ich auf ein merkwürdiges Verhalten des IE6 gestoßen.

Ja, das ist ein IE Bug, kann auch auftreten, wenn in den verschachtelten DIVs input-tags vorkommen, jedesmal, wenn ein Input-Feld den Focus bekommt, wandert das Feld in irgendeine Richtung.
Als Abhilfe kenn ich nur den Verzicht auf nested-DIVs...

[uwe]

Hi klawischnigg

Danke für die Information. Hast du zufälligerweise einen Link parat, wo der Bug dokumentiert ist? Mir ist das Teil nämlich noch nie untergekommen.

Cheers

Uwe
Portland, OR

[klawischnigg]

Hi klawischnigg

Danke für die Information. Hast du zufälligerweise einen Link parat, wo der Bug dokumentiert ist? Mir ist das Teil nämlich noch nie untergekommen.

Leider nein, ich kenn das auch nur aus eigener Erfahrung und der von Leidensgenossen; Link hab ich keinen; Probier's einmal mit dem <span>-Tag, der kann ja in einigen Fällen den <div>-Tag ersetzen, möglicherweise verschwindet dieses Phänomen damit...

[uwe]

Okay, trotzdem nochmal danke für den Hinweis.

Uwe