Horziontal zentrierte Page mit fixed-Header-"Div" IE6

josDesign

josDesign

Erfahrenes Mitglied
Hallo liebes Forum,

ich bin gerade dabei, folgendes, welches im IE7 und FF richtig angezeigt wird zu realisieren:
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head>


<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title> </title>
<style type="text/css">

body {margin:0; padding:0 10px 0 10px; border:0; height:100%; overflow-y:auto; text-align: center;}

#page {margin: 0 auto; display:block; width:800px; height:500px;  background:silver;}

#menu {display:block; top:0; left:50%; width:800px; margin-left: -400px; height: 100px; background: pink; position:fixed; }
* html #menu {position:absolute;}

</style>
<!--[if lte IE 6]>
   <style type="text/css">
   /*<![CDATA[*/ 
html { overflow-x:auto; overflow-y:hidden; }
body { height:100%; overflow-y:auto; }

   /*]]>*/
   </style>
<![endif]-->


</head><body>



<div id="page">
inhalt <br />inhalt <br />inhalt <br />inhalt <br />inhalt <br />inhalt <br />inhalt <br />inhalt <br />inhalt <br />inhalt <br />
inhalt <br />inhalt <br />inhalt <br />inhalt <br />inhalt <br />inhalt <br />inhalt <br />inhalt <br />inhalt <br />inhalt <br />
</div>

<div id="menu">

</div>

</body></html>

Wenn die Höhe des Viewports allerdings kleiner wird, dann gibt es plötzlich einen horizontalen Versatz im IE6 und darunter.
Die Overflow-Angaben im IE6 Stylesheet sind von Nöten, da sonst ein doppelter vertikaler Srcollbalken erscheint.

Ich habe nun schon sehr viel versucht, bin aber auf keinen grünen Zweig gekommen.

Hat jemand vielleicht eine Idee?

Mit bestem Dank im Voraus,
jos
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück