position: fixed; auch mit dem IE
Olaf Bosch am 28.04.2003 – Keine Kommentare
Ohne Einsatz von JavaScript war es lange nicht möglich, eine feststehende Navigation zu realisieren, da der Internetexplorer kein position: fixed; unterstützt. Nun wurde aber eine Möglichkeit, dieses mittels CSS umzusetzen, gefunden.
Diese Möglichkeit möchte ich hiermit vorstellen.
Ganz normal mit <link rel="stylesheet"......> oder mit <style type="text/css">@import url.......</style> wird ein CSS mit den Angaben für Gecko's geladen.
Der wichtige Ausschnitt des Inhalts:
div.logo {
height: 100px;
position: fixed;
right: 50px;
top: 20px;
width: 200px;
}
.fest {
height: 100%;
padding-top: 40px;
width: 13em;
background: #CCCC66;
color: #000000;
font: 90% Verdana, Arial, Helvetica, sans-serif;
left: 0;
position: fixed;
top: 0;
}Und nun das Wichtigste: die Eigenschaft position: fixed; kennt der IE nicht. Daher werden für den IE spezielle Anweisungen über ein extra CCS angeboten:
<!--[if gte IE 5]>
<link rel="stylesheet" type="text/css" href="ie.css">
<![endif]-->
Der Inhalt:
div.logo {
filter: Alpha(opacity=80);
height: 100px;
position: absolute;
right: 50px;
top: 20px;
width: 200px;
}
html, body {
height: 100%;
margin: 0;
overflow-y: hidden;
padding: 0;
}
.fest {
background: #CCCC66;
color: #000000;
font: 90% Verdana, Arial, Helvetica, sans-serif;
height: 100%;
left: 0;
padding-top: 40px;
position: absolute;
top: 0;
width: 13em;
}
.gesamt {
height: 100%;
overflow: auto;
width: 100%;
}Und siehe da: so macht auch der IE ab Version 5 mit.
Getestet habe ich das ganze mit IE 6, NN 7, Opera 6.05 und 7, sowie Mozilla 1.02
In der ZIP sind enthalten: beide notwendigen CSS, eine HTML als Beispiel und als Extra ein fixiertes Logo. Download
Quellenangabe: devnull
