|
|||
IE6 position:fixed Hack - Scrollbar wird abgeschnitten
Hallo!
Ich versuche auf meiner Webseite, am Rand oben, eine feste Navigationsleiste zu installieren. Diese soll immer mit scrollen. Dies funktioniert soweit auch mit Firefox 1.5 und IE 6. Allerdings schneidet der Internet Explorer immer ein Teil der Scrollbar ab, was nicht nur unschön aussieht, sondern auch noch beim Scrollen nervt. Was mache ich falsch? Bzw. wie kann ich den Internet Explorer überlisten, die komplette Scrollbar anzuzeigen. Das XHTML-Dokument: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html> <head> <title>Überschrift</title> <link rel="stylesheet" type="text/css" href="style.css" /> <!—-[if lt IE 7]><link rel="stylesheet" type="text/css" href="iehacks.css" /><![endif]—-> </head> <body> <div class="links"> <p>Meine Navigationsleiste</p> </div> <div class="content"> <h1>Überschrift</h1> <p>Text</p><p>Text</p><p>Text</p><p>Text</p><p>Text</p><p>Text</p><p>Text</p><p>Text</p><p>Text</p><p>Text</p><p>Text</p><p>Text</p><p>Text</p><p>Text</p><p>Text</p><p>Text</p><p>Text</p><p>Text</p><p>Text</p><p>Text</p><p>Text</p><p>Text</p><p>Text</p><p>Text</p> </div> </body> </html> Code:
/* Allgemeine Formatierungen */ html { color: #000000; /* schwarz */ background-color: #FFFFFF; /* weiß */ font-size: 16px; font-family: Arial, Verdana, sans-serif; height: 100%; width: 100%; padding: 0px; margin: 0px; } body { height: 100%; padding: 8px; margin: 0px; } /* Navigationsleiste */ .links { background-color: #33FF33; /* grün */ position: fixed; top: 0px; left: 0px; width: 100%; padding: 0px; margin: 0px; } .links p { padding: 0px; margin: 0px; } Code:
/* Navigationsleiste */ * html { overflow-y: hidden; } * html body { margin: 0px; padding: 0px; } * html .links { position: static; z-index: 1; } * html .content { overflow: auto; width: 100%; height: 100%; } pmw Geändert von pmw (21.09.2006 um 13:33 Uhr) |
Sponsored Links |
|
|||
Du kannst einiges abkürzen, stell global margin und padding auf Null, dann musst Du es nicht für jedes weitere Element definieren.
Farben, Schriften usw. im Body festlegen, nicht html. Das erhält nur die Höhe. 100%-Breite bei Blockelementen anzugeben ist nicht nötig (es sei denn man hat es vorher anders gemacht und muss diesen Wert zurücksetzen), die nehmen standardmäßig die volle Breite ein. Ungünstig sind px-Angaben für Abstände und Schriften, besser em oder %. Das lässt sich skalieren und die Maße passen sich bei benutzerseitig veränderten Schriftgrößen an. Um im IE keine Querscrollleiste zu erhalten, hab ich für .links padding:8px umgestellt, so dass nur noch padding-top und -bottom gemeint sind. Sonst ist .links 100% Breit plus je 8px nach rechts und links, also mehr als auf eine Fensterbreite passen kann. Das hier ist grob überarbeitet und zeigt keine abgeschnittene grüne Leiste mehr: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de"> <head> <title>Test</title> <style type="text/css" media="screen,projection"> /* Allgemeine Formatierungen */ * { margin: 0; padding: 0;} html, body { height: 100%; } body { color: #000000; /* schwarz */ background-color: #FFFFFF; /* weiß */ font-size: 16px; font-family: Arial, Verdana, sans-serif; } /* Navigationsleiste */ .links { background-color: #33FF33; /* grün */ position: fixed; top: 0px; left: 0px; width: 100%; padding: 8px; } /* Content */ .content h1 { margin-top: 1em; } /* IE Hacks - Navigationsleiste */ * html { overflow-y: hidden; } * html .links { position: static; z-index: 1; } * html .content { overflow: auto; height: 100%; } </style> </head> <body> <div class="links"> <p>Meine Navigationsleiste</p> </div> <div class="content"> <h1>Überschrift</h1> <p>Text</p><p>Text</p><p>Text</p><p>Text</p><p>Text</p><p>Text</p><p>Text</p><p>Text</p><p>Text</p><p>Text</p><p>Text</p><p>Text</p><p>Text</p><p>Text</p><p>Text</p><p>Text</p><p>Text</p><p>Text</p><p>Text</p><p>Text</p><p>Text</p><p>Text</p><p>Text</p><p>Text</p> </div> </body> </html> |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Conten-Bereich wird abgeschnitten (IE6) | reeky | CSS | 3 | 16.08.2010 15:58 |
CSS Hack + IE6 + Div + Elternelement | BooKer | CSS | 7 | 12.01.2009 21:03 |
IE6 vs. FF, IE7 - Abstände in min-width hack, 3 faux col design | Krischu | CSS | 2 | 20.05.2007 11:03 |
Div mit Hack für IE5 und IE6 | Jawad | CSS | 7 | 19.07.2005 11:39 |
position:fixed layout für ie6 ohne quirksmode? | derdiedas | CSS | 6 | 28.04.2005 12:56 |