zum Inhalt oder zum Menü.

Webdesign Haas, Bremen

Individuelle Beratung
und Gestaltung für
Ihren Internetauftritt

Webdesign Haas
Marcus Haas
Brabeckstr. 7


Tel. 0421 / 387 13 60
Mobil: 0162 / 95 75 407

Marcus Haas on Google+
Unsere Seite auf Google+

Fixierte Elemente im IE

Leider versteht IE bis zur Version 6 die Anweisung "position:fixed" nicht. Es gibt zwar CSS-Hacks oder Javascript-Lösungen, aber die sind oft recht kompliziert einzubinden oder machen mehr Schwierigkeiten als sie lösen.

position:fixed (mit expression)

Diese Methode ist also vor allem geeignet, um Teile innerhalb eines Fensters zu fixieren, das eigene Scrollbalken hat (z.B. weil mit overflow:auto solche angezeigt werden) und funktioniert nur mit Javascript.

Durch die Verwendung von experssions (Javascript Anweisungen im CSS) validiert ein solches Stylesheet leider nicht mehr.

.fixed{
  position:fixed;
  position:expression("absolute");
  top:expression((egal = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop) +"px");
}

Jedes Element mit der Klasse "fixed" wird jetzt in der gleichen Weise verschoben, wie man das Element scrollt.

Das sieht jetzt noch etwas seltsam aus, zum einen wird die Eigenschaft zunächst einer Variablen zugewiesen und dazu erfolgt eine Abfrage, ob "document.documentElement.scrollTop" überhaupt definiert ist. Die Abfrage ist unterschiedlichen Versionen des IE geschuldet, denn wenn er Standardkonform arbeitet und nicht im Kompatibilitätsmodus, wird der Wert " documentElement " zugewiesen und ohne die Variablenzuweisung wird die Position nicht erneuert.

Noch besser als obige Lösung ist es natürlich die expression-Anweisungen für den IE vor anderen Browsern zu verstecken, z. B. mit Conditional Comments

position:fixed (nur CSS)

Wenn ein Element nur relativ zum BODY-Tag fixiert werden soll genügt eine einfachere Konstruktion:

html{overflow: hidden;}
body{overflow: auto;}
.text{position:static;}
.menu{position:absolute;}

Alle Elemente mit dem Attribut position:static werden gescrollt, während Elemente mit position:absolute im IE jetzt statisch dargestellt werden.

Allerdings machen diese Anweisungen bei allen Browsers, die position:fixed verstehen natürlich Probleme, so dass man diesen Abschnitt vor Ihnen verstecken muss. Das kann man mit verschiedenen Browser-Hacks erreichen, aber die eleganteste Lösung ist, diesen Abschnitt wirklich nur dem IE zu zeigen, dazu muss man nur eine kleine Abfrage in den HEAD einbauen, die auch nur vom IE verstanden wird:

<head>
  ...[andere Angaben]...
  <!--[if IE]>
    <link rel="stylesheet" type="text/css" href="nurie.css" />
  <![endif]-->
</head>

Wenn man SSI nutzen kann geht es sogar noch eleganter, und andere Browser sehen noch nicht einmal einen Kommentar:

<head>
  ...[andere Angaben]...
  <!--#if expr="${HTTP_USER_AGENT} = /MSIE/)" -->
    <link rel="stylesheet" type="text/css" href="nurie.css" />
  <!--#endif -->
</head>

Letztere Methode hat allerdings den Nachteil, dass auch Browser mit diesem Script versorgt werden, die sich aus mangelndem Selbstbewusstsein als IE ausgeben, so dass man hier zumindest zusätzlich zu SSI auch Conditional Comments einsetzen sollte.

Links

Making Internet Explorer use position: fixed;