CSS position:fixed für den IE 6

Es ist eigentlich kein Geheimnis – aber damit nicht nochmal jemand sagt, es wäre für den IE6 unmöglich, ein position:fixed zu realisieren.. nun ja, eigentlich ist es ja auch nur ein ein Hack – wie dem auch sei..

Warum Augenmerk auf den IE6? – Es ist Fakt, das der IE6 und
Konsorten aka Tonlinebrowser, etc.pp derzeit noch hoch im Gebrauch sind
– dennoch sind die neuen Webstandards XHTML 1.0/1.1 sowie CSS 2 nicht
zu vergessen.

Das Problem: Der Internet Explorer kann bis
einschließlich Version 6 diverse Eigenschaften des CSS-2-Standards
nicht, u.a. gehört die sehr nützliche position:fixed Eigenschaft. Mit
Hilfe dieser Einstellung können Elemente auf den Bildschirm unabhängig
vom Scrolltext fixiert werden.

Die Lösung: In den unendlichen
Weiten und Tiefen von Browserhacks, -weichen und -hacks gibt es u.a.
folgendes, welches nur vom IE bis einschließlich IE6 interpretiert wird:

* html <…>

Erklärung:
Diese Kindelemente sind an für sich normal und zeigen normalerweise auf
eins der jeweiligen Kindelemente. * html ist allerdings Unsinn, da über
html gar nichts vorhanden ist.

Wir hätten also schon mal die
Möglichkeit, direkt per Stylesheet für die Problemstelle zu beheben,
ohne das andere Browser (Firefox, Mozilla, Opera, IE7) irritiert werden
würden.

Die position:fixed Eigenschaft lässt sich wie folgt simulieren: Man "verlegt" den Overflow, also die scrollbare Eigenschaft einfach vom Body in den Content-Layer; man kann sich das quasi als ein fenstergroßes Div-Layer vorstellen, welches Scrollbalken hat. Die "fixierten" Elemente sind dann normale "absolute" Elemente, welche bereits Bestandteil von CSS 1 sind und daher auch vom IE 6 bereits unterstützt werden.

Zusammenfassend also, in Pseudo-validem HTML-Code

<html>

<head>…</head>
<body>
<div id="content">…</div>

<div id="sidebar">…</div>
</body>
</html>

Der CSS-Code:

body {
margin-left:105px;
}
#sidebar {

position:fixed;
top:0;
left:0;
width:100px;
}

/* fix für ie4-ie6 */
* html {
overflow-y: hidden;
}
* html body {

height: 100%;
overflow: auto;
}

* html body #sidebar {
position: absolute;
}
* html body #helper {
position: absolute;

}

Natürlich, es besteht auch die Möglichkeit, über IE-Comments spezifische Angaben einzuschleusen. Allerdings müssen dort explizite Anweisungen im Dokument stehen, die nicht immer möglich sein können.. bei dieser Lösung ist das HTML-Dokument "Fixlos". Und so sollte es ja sein.

In Anlehnung an tagsoup

Kommentar verfassen

This site uses Akismet to reduce spam. Learn how your comment data is processed.