Cascading Style Sheets ::Artikel
position: fixed für IE/Win 6
Mit dem Wert fixed gibt CSS uns die Möglichkeit, einige interessante Dinge zu tun. So können wir z. B. Hintergründe am Ausgabemedium, d. h. meistens dem Browserfenster, ausrichten. Oder wir können ein Block- Level- Element durch position:fixed fest positionieren, sodass es beim Scrollen an der gleichen Stelle stehen bleibt. Damit lassen sich in standardstreuen Browsern einige hübsche Effekte erzielen.
Wer erinnert sich im Unterschied dazu nicht noch an die Zeiten der Version-4-Browser, in denen solche Dinge nur mit Hilfe von JavaScript möglich waren. Leider gibt es einen Browser, der diesen Zeiten auch heute noch nicht so ganz entwachsen scheint: IE/Win 6. Der Ausdruck 'in standardstreuen Browsern' bedeutet nämlich hier: 'nicht mit IE/Win 6'. IE/Win 6 kennt den Wert fixed nicht und ignoriert alle Deklarationen, die diesen Wert enthalten.
Genau genommen hängt alles davon ab, für welches Element der Wert fixed deklariert wurde, denn für den BODY funktioniert auch im IE/Win 6 alles tadellos. Solange man seine Hintergrundgrafik also nur an das Element BODY anbringt, scheint alles in Ordnung: siehe Beispiel 1.
Ebenso sollte es aussehen, wenn man sein Hintergrundbild an ein beliebiges Element P anbringt. Vergleichen Sie einmal die Darstellung des Beispiel 2 im IE/Win 6 und in standardstreuen Browsern. IE/Win 6 ignoriert die ihm unbekannte Deklaration nicht nur, sondern stellt sie sogar fehlerhaft dar.
Dasselbe Problem tritt bei der fixen Positionierung von Block- Level- Elementen auf. Dabei wird nicht nur ein Element falsch dargestellt, sondern es zerfällt unter Umständen das gesamte Layout der Seite.
Dennoch macht es keinen Sinn, allein aus diesem Grund ganz auf fixe Positionierungen zu verzichten. Designelemente wie etwa Navigationsmenüs werden in den allermeisten Fällen auf dem Bildschirm Platz finden, denn 90% aller Bildschirme sind heute bereits 1024×768 oder größer. Selbstverständlich sollte man bei großen Elementen nichts riskieren, denn alle Teile eines fixed positionierten Elementes, die außerhalb vom Bildschirm zu liegen kommen, sind für den Nutzer völlig unzugänglich.
Lösen lässt sich dieses Problem, wie sollte es anders sein, mit Hilfe von JavaScript. Das am besten dokumentierte Script, mit dem Hintergründe und Elemente fixed positioniert werden können, findet man bei Andrew Clover. Es sorgt dafür, dass IE/Win ab Version 5 die Deklarationen background- attachment: fixed und position: fixed korrekt interpretiert. Das Beispiel von oben funktioniert dann so: Beispiel 3.
Hinweis:
Leider kann ich dieses Script nicht mehr zum Download anbieten, nachdem eine große deutsche Online-Werbeagentur es hotverlinkt und mir damit einige Gigabyte an Trafficvolumen gestohlen hat. Wenn Sie das Script dennoch verwenden wollen, können Sie es dem Quelltext des Beispiels 3 entnehmen.
Andere Lösungsansätze für dieses Problem bauen auf reinem (oder besser: unreinem) CSS auf. Sie arbeiten mit Hilfe von browserspezifischen Bugs, mit proprietären Eigenschaften oder konditionellen Kommentaren. Einer dieser Hacks geht soweit, einige Bröckchen JavaScript in das Stylesheet zu integrieren. Alle diese Lösungen funktionieren mehr oder weniger problemlos, sie haben jedoch einige wesentliche Nachteile:
- So weit sie proprietäre Eigenschaften oder konditionelle Kommentare nutzen, sind sie ohnehin nicht valide.
- Das gleiche gilt für JavaScript im Stylesheet - eine Lösung, die eher an die Hacks aus vergangenen Jahren erinnert. Und darüber hinaus: warum soll man JavaScript in ein Stylesheet einfügen, wenn man dasselbe Ergebnis besser und sauberer mit einen korrekt geschriebenen Script erreichen kann?
- Für alle Bugs eines Browsers besteht die Möglichkeit, dass der Hersteller diese Fehler mit einem künftigen Bugfix eliminiert. Dadurch läuft man Gefahr, dass eine einmal erstellte Seite danach nicht mehr korrekt dargestellt wird.
- Jeder Hack, der nur der Darstellung in einem einzigen Browser dient, hat in aller Regel auch Auswirkungen auf andere Browser, die dann mit weiteren Hacks dort wieder rückgängig gemacht werden müssen.
Deshalb wurde auf die detaillierte Beschreibung dieser Möglichkeiten auf dieser Seite verzichtet. Letztendlich ist dies aber nur meine persönliche Meinung. Sie sollte niemanden davon abhalten, wenn er bereit ist, die Nachteile in Kauf zu nehmen, sich über diese Lösungen zu informieren und sie anzuwenden.
TOP
