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>
style.css:
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;
}
iehacks.css:
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%;
}
Viele Grüße
pmw