Fixed Footer Cross Browser
Alle Intensivstation Templates sind XHTML 1.0 und CSS2 validiert.
Dieses Template wurde auf folgenden Browsern getestet:
MAC: Safari, Firefox | PC: IE6, IE7, Firefox
position: fixed; für sensitive Browser
Fixe Positionen sind für alle neuen Browser ein Kinderspiel.
#footer {
position: fixed;
width: 100%;
left: 0;
bottom: 0;
background:url(images/bg-footer.gif) repeat-x left bottom;
}
Das Element wird mit position: fixed; aus dem Fluss des HTML genommen und liegt über den static positionieren Elementen.
position: fixed; braucht eine Breitenangabe.
siehe Beispiel für neue Browser
position: fixed; for old IE6 Browser
Intenet Explorer 6 ignoriert position fixed und braucht eine Spezialbehandlung.
IE6 versteht position: absolute;.
html, body {
height: 100%;
overflow: hidden;
}
Mit overflow: hidden; wird im HTML und im BODY der Scrollbalken entfernt.
#container{
overflow: auto;
height: 100%;
}
Mit overflow: auto; wird dem #container div der Scrollbalken mitgegeben.
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 110px;
}
Mit position: absolute; wird der #footer div plaziert. position: absolute;
braucht eine Breitenangabe.
#footer-inner {
background:url(images/bg-footer.gif) repeat-x left bottom;
margin-right: 17px; /* important for IE6 scrollbars */
height: 110px;
}
IE6 braucht zusätzlich einen #footer-inner div. Dieser bekommt das Hintergrundbild und
einen margin-right: 17px; . Diese 17px entsprechen der Scrollbalken Breite.
Werden diesen entfernt, liegt der Scrollbalken unter dem Hintergrundbild.
siehe Beispiel für Internet Explorer 6
position: fixed; Cross Browser
<link href="css/fixfooter.css" rel="stylesheet" type="text/css" />
Für die Cross Browser Version wurden externe Stylesheets verlinkt. Angaben, die für alle Browser gleich bleiben, stehen im fixfooter.css
<!--[if lte IE 6]> <link href="css/fixfooter-ie6.css" rel="stylesheet" type="text/css" /> <![endif]-->
IE6 bekommt eine Browser Weiche mit Conditional Comments.
Mehr dazu bei bueltge.de/conditional-comments-effizient-nutzen.
Im IE6 CSS werden nur die Änderungen mitgegeben, siehe fixfooter-ie6.css.
Alle anderen Angaben kommen vom fixfooter.css.
Siehe Beispiel für neue Browser
