Dean Edwards IE 7

Zum Zeitpunkt des Erscheinens meines Artikels, gab es viele andere Versuche position:fixed in allen Browsern umzusetzen. Nicht allzulange, nachdem ich den Artikel hier schrieb, veröffentlichte Dean Edwards auf seiner Seite eine kleine CSS/JS Erweiterung namens IE7.

Dabei handelt es sich keinesfalls um eine ausführbare Datei, welche die ausführbaren Dateien des Internet Explorers in irgendeiner Art und Weise auf dem heimischen Rechner modifiziert. Vielmehr handelt es sich um Javascript Dateien, die via Conditional Comment eingebunden werden.

Das kleine Paket von Dean Edwards beinhaltet einige in Javascript programmierte Erweiterungen, die verschiedene Fehler des Internet Explorers ausmerzen. Die Erweiterung kann als ZIP-File auf seiner Seite heruntergeladen werden oder auch bei Google Code. Nach dem Entpacken der Zip-Datei reicht es den Ordner IE7 ins Root-Verzeichnis der Webseite zu kopieren und folgende Zeilen in den Head der HTML Datei zu kopieren, die diese Erweiterungen nutzen soll :

<!--[if lt IE 7]>
  <mce:script src="/ie7/ie7-standard-p.js" mce_src="/ie7/ie7-standard-p.js" type="text/javascript"></mce:script>
<![endif]-->

Sollte die Extension für XML Dokumente verwendet werden, dann muss der Aufruf etwas anders aussehen, erfüllt jedoch den selben Zweck

<!--[if lt IE 7]>
 <html:script src="/ie7/ie7-standard-p.js" mce_src="/ie7/ie7-standard-p.js" type="text/javascript">
 </html:script>
<![endif]-->

Fertig!
Ab diesem Augenblick verstehen alle IE5+/Win unter anderem position:fixed, und zwar im wahrsten Sinne des Wortes.

Während vorher folgende Zeilen im IE/Win zu keinem sinnvollen Ergebnis führten, klappt nach einfügen der oben beschriebenen Zeile alles wunderbar.

    <!--[if lt IE 7]><mce:script src="/ie7/ie7-standard-p.js" mce_src="/ie7/ie7-standard-p.js" type="text/javascript"></mce:script><![endif]-->
<!--
      #fixed {
        top:0;
        left:0;
        position:fixed;
        height:100px;
        width:100%;
        background-color:navy;
        color:white;
      }
      #notfix{
        position:relative;
        margin:110px 30px 30px 30px;
        color:black;
      }
      #notfix p{
        margin-top:250px;
      }
 
-->
<div id="fixed">
      Dieser Text steht fix links oben am Rand und bewegt sich auch beim Scrollen nicht mit.</div>
<div id="notfix">
 
Dieser Text is einfach nur lang und soll nicht fix bleiben beim scrollen
 
Dieser Text is einfach nur lang und soll nicht fix bleiben beim scrollen
 
Dieser Text is einfach nur lang und soll nicht fix bleiben beim scrollen
 
Dieser Text is einfach nur lang und soll nicht fix bleiben beim scrollen
 
Dieser Text is einfach nur lang und soll nicht fix bleiben beim scrollen</div>

Der IE/Win versteht nun auch völlig korrekt postion:fixed. Und zwar ohne weitere Hacks, Tricks, Bugs, oder Ähnliches. Der Vorteil dieser Variante liegt ganz klar in der Einbindung der Erweiterung und der Tatsache, dass keine weiteren Stylesheets für den IE/Win mehr notwendig sind, um ihm positon:fixed verständlich zu machen. Er versteht es so wie im Beispiel beschrieben. Die Extension funktioniert wunderbar, wenn man nicht allzukomplizierte Konstruktionen innerhalb des fixen Bereiches verwendet.Wenn man das weiss und irgendwie vermeidet, kann ich diese Extension Jedem nur empfehlen.

Neben position:fixed werden auch noch weiter Verhalten mitgeliefert (unter anderem PNG Unterstützung, usw), aber dazu sollte besser Dean Edwards Seite zu Rate gezogen werden. Er beschreibt dort welche Feature implementiert werden und arbeitet ständig an Ergänzungen und Verbesserungen seiner Extension.
Mittlerweile wurde das Paket auch überarbeitet und korriegiert sogar fehlerhafte Verhalten im IE7. Außerdem ist es nicht mehr zwingend notwendig die Datei auf dem eigenen Server zuhosten. Sie kann auch direkt aus dem Google Code Projekt verlinkt werden. Wie das funktioniert erfährt dort auf der Seite.

Fazit

Es ist also möglich eine fast cross-browser-konforme Lösung zu finden, um den fixen Effekt von Elementen auf dem Bildschirm zu realisieren.

Die von mir oben aufgeführte Lösung funktioniert unter folgenden Browsern :

  • Internet Explorer 5.0+/Win
  • Mozilla 0.9x + (Sowie alle Derivate)
  • Opera 5+/Win
  • Internet Explorer 5.2/MAC OS X 10.2
  • Safari alle Versionen/MAC OS X 10.2
  • Mozilla 1.2.1+/MAC OS X 10.2
  • Camino 0.7+/MAC OSX 10.2

Danke an Andreas Geier für die Tests auf Mac OS X

Wesentlich effektiver jedoch, die IE7 Extension von Dean Edwards. Kommt sie zum Einsatz ist die Lösung ohne grossartige Hacks möglich, solange die Browser position:fixed unterstützen, oder es sich um den IE5+/Win handelt.

Kleiner Hinweis

Aufgrund eines kleinen Coding Problems von WordPress mit einigen hier verwendeten Extensions werden offenbar einige Teile des Quellcodes nicht korrekt wiedergegeben.

  1. An Stelle der Minuszeichen in den Conditional Comments, bzw. sämtlichen Kommentaren wird ein Gedankenstrich dargestellt. Diesen Fehler konnte ich leider nicht immer korrigieren, da die Zeichen sich von der Darstellung nicht unterscheiden, jedoch vom ASCII Code.
  2. Ähnliches gilt für die Anführungszeichen, die ebenfalls nicht korrekt dargestellt werden. Das bedeutet, dass alle Anführungszeichen und Minuszeichen durch die korrekten in einem Editor ersetzt werden müssen.

Geschrieben : 02.Juli 2002
Letztes Update : 24.Juli 2006

Pages: 1 2 3