+ (CSS): Lustiges Spielchen mit IE-Bug (falls einer)

[Patrick Andrieu]

Hallo alle!

Bei meinem derzeitigen Projekt bin ich an ein Layout gebunden, das mir ganz und gar nicht gefällt. Der von einem erworbenen Template stammende Code bestand ursprünglich aus zig Tabellen, um dieses etwas überfrachtete Konstrukt zu realisieren. Ich habe es nun nachgebaut, ohne Tabellen, mit etlichen Klimmzügen für die dummen Browser (IE 6 und 7).

Um nun mehr Text im viel zu kleinen Kästchen hinein zu bekommen, wollte ich overflow:auto benutzen.

Und nun, was denkt Ihr, was im folgenden, auf ein Minimum reduzierten Beipiel scrollt?

o_test.html

Ich habe hier absichtlich die weiteren p-Elemente mit   gefüllt, denn... wenn diese »richtigen Text« enthalten, sieht es so aus:

o_test2.html

Die alten IEs zeigen zwar einen Scrollbalken, aber leider auch den ganzen Text unterhalb des DIV »content«.

postion:relative, das ich ja wegen z-index brauche (es ist Absicht und gewollt, dass der Text über einen Teil der absolut positionierten Grafik »steht«), scheint das Interpretieren von overflow:auto bei den alten IEs aufzuheben (teilweise, denn eine Scrollleiste entsteht ja, und das DIV wächst nicht mit dem Content - aber der Text ist sichtbar).

Wenn ich position:relative entferne, klappt alles mit den Nachbarn, äh, IEs - nur überdekt die Grafik leideer wieder den Text: o_test3.html

Jemand eine Idee?

Viele Grüße aus Frankfurt/Main,
Patrick

[ChrisB]

Hi,

postion:relative, das ich ja wegen z-index brauche (es ist Absicht und gewollt, dass der Text über einen Teil der absolut positionierten Grafik »steht«),

Transportiert diese Grafik wirklich Inhalt, oder ist sie nur Verzierung?

Wenn ich position:relative entferne, klappt alles mit den Nachbarn, äh, IEs - nur überdekt die Grafik leideer wieder den Text: o_test3.html

Jemand eine Idee?

DIV-Container über das Bild legen - und den Teil des Bildes, der „im” DIV liegen soll, dann als Hintergrundbild für diesen realisieren?
(Dabei dann ggf. mit der Fehlinterpretation älterer IEs, was Fixierung von Hintergrundbildern angeht, aufpassen.)

MfG ChrisB

[Patrick Andrieu]

Hallo ChrisB!

Transportiert diese Grafik wirklich Inhalt, oder ist sie nur Verzierung?

Jein. Aber als Hintergrundgrafik kann ich sie nicht mit SEO-relevanten alt-Texte bestücken ;)

DIV-Container über das Bild legen - und den Teil des Bildes, der „im” DIV liegen soll, dann als Hintergrundbild für diesen realisieren?
(Dabei dann ggf. mit der Fehlinterpretation älterer IEs, was Fixierung von Hintergrundbildern angeht, aufpassen.)

Das DIV hat aber einen (fast) weißen Border. Daran scheitert es erstmal, denn sonst würde der Rahmen über der Grafik stehen. Oder ich müsste wieder mal 'rumtricksen mit der Positionierung...

Igitt, was ein Scheißjob ;)

Viele Grüße aus Frankfurt/Main,
Patrick

[Der Martin]

Hallo,

mit etlichen Klimmzügen für die dummen Browser (IE 6 und 7).

gut dass du die Versionen dazu nennst - denn ich sehe hier zwischen FF3, Opera8/9 und IE5.5 nur einen einzigen Unterschied: IE kommt auf die Idee, div#content auch noch waagrecht zu scrollen. Wohl eine Auswirkung des Box Model Bugs aller IE<6 durch die Verwendung von padding.

Und nun, was denkt Ihr, was im folgenden, auf ein Minimum reduzierten Beipiel scrollt?

Natürlich das div#content.
Mal anders gefragt: Wie *sollte* das Layout denn aussehen und funktionieren?

Die alten IEs zeigen zwar einen Scrollbalken, aber leider auch den ganzen Text unterhalb des DIV »content«.

Welchen Text? Unterhalb von #content ist in deinem Beispiel kein Text mehr.

So long,
 Martin

[Patrick Andrieu]

Hallo Martin!

gut dass du die Versionen dazu nennst -

eben, und wenn ich sie schon nenne, sollte man auch damit testen ;) Hast Du keinen? Kauf Dir einen!

denn ich sehe hier zwischen FF3, Opera8/9

Das sind noch gute...

und IE5.5

habe ich nicht.

IE

Version 5.5, wolltest Du sicher sagen...

kommt auf die Idee, div#content auch noch waagrecht zu scrollen. Wohl eine Auswirkung des Box Model Bugs aller IE<6 durch die Verwendung von padding.

Denke ich auch.

Und nun, was denkt Ihr, was im folgenden, auf ein Minimum reduzierten Beipiel scrollt?
Natürlich das div#content.

Natürlich scrollen die guten Browser den Inhalt des div#content. Nicht doch die IE 6 und 7. Sie scrollen nur die grüne Neonschrift hoch. Warum? Weil das umgebende p als Einziges kein postion:relative erhält.

Mal anders gefragt: Wie *sollte* das Layout denn aussehen und funktionieren?

Wie in den »guten« Navigatoren.

Die alten IEs zeigen zwar einen Scrollbalken, aber leider auch den ganzen Text unterhalb des DIV »content«.
Welchen Text? Unterhalb von #content ist in deinem Beispiel kein Text mehr.

IE 6 und 7 zeigen zwar einen Scrolllbalken, aber auch den ganzen (in WORTEN, äh, GROSSBUCHSTABEN: den GANZEN) Inhalt des div#content unterhalb dieses. Hier eine »heruntergescrollte« Ansicht, wo Du erkennen kannst, dass nur die Grafik, bzw. das p-Element mit der Klasse »neon« ohne position:relative hochgescrollt wurde:

http://www.atomic-eggs.com/z_testdir/shots/neon.gif

Viele Grüße aus Frankfurt/Main,
Patrick

[ChrisB]

Hi,

Die alten IEs zeigen zwar einen Scrollbalken, aber leider auch den ganzen Text unterhalb des DIV »content«.

postion:relative, das ich ja wegen z-index brauche (es ist Absicht und gewollt, dass der Text über einen Teil der absolut positionierten Grafik »steht«), scheint das Interpretieren von overflow:auto bei den alten IEs aufzuheben

Der Bug ist bekannt, und position:relative für das overflow-Element behebt ihn im allgemeinen - allerdings verändert das in diesem Spezialfall dann wiederum den Gültigkeitsbereich des z-index :-/

MfG ChrisB

[Patrick Andrieu]

Hallo ChrisB!

Der Bug ist bekannt, und position:relative für das overflow-Element behebt ihn im allgemeinen - allerdings verändert das in diesem Spezialfall dann wiederum den Gültigkeitsbereich des z-index :-/

Steht irgendwo im Netz Literatur darüber?

Als schnell-und-dreckig-e Lösung wird position:relative für die Elementen des div#content (nur für die IE 6 und 7)durch position:static überschrieben und die unteren Elemente, die ja im Bereich der »neon«-Grafik kommen, werden um 40 px eingerückt.

In der Hoffnung dass die Besitzer alter IEs denken, es sei so gewollt ;)

Viele Grüße aus Frankfurt/Main,
Patrick, mit 39 Fieber wirklich fast jenseits vom delirium...

[ChrisB]

Hi,

Der Bug ist bekannt, und position:relative für das overflow-Element behebt ihn im allgemeinen - allerdings verändert das in diesem Spezialfall dann wiederum den Gültigkeitsbereich des z-index :-/

Steht irgendwo im Netz Literatur darüber?

Zum Bug selber?
http://www.google.com/search?q=ie+overflow+position+bug

Patrick, mit 39 Fieber wirklich fast jenseits vom delirium...

Gute Besserung - und ab ins Bett mit dir :-)

MfG ChrisB