Position Fixed IE6 - Habe es fast gelöst nur noch eine Kleinigkeit fehlt (hoffe ich)

Status
Nicht offen für weitere Antworten.
S

Sebastian

Erfahrenes Mitglied
Hallo,

ich habe mit folgendem Code erfolgreich position: fixed für den IE6 simulieren können.
Das ganze funktioniert wunderbar im Firefox, IE7 und prinzipiell auch im IE6.
Allerdings gibt es im IE6 noch einen kleiner Fehler und ich hoffe ihr könnt mir helfen diese auch zu eliminieren. Wenn man das Fenster so klein schiebt, dass man horizontal scrollen muss, dann habe ich 2 Scrollbalken rechts (s. Screenshot). Diesen 2. Scrollbalken würde ich gerne auch noch weg bekommen.

Screenshot IE6 "Bug":

http://img155.imageshack.us/img155/3259/ie6posfixedsy5.jpg


HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>
<head>
<title>Position Fixed</title>
<style type="text/css">

html, body {
	height: 100%;
	margin: 0;
	text-align: center;
}

#wrapper {
	width: 800px;
	margin: 0 auto 0 auto;
	height: 100%;
}

#left {
	width: 200px;
	height: 100%;
	float: left;
}

#content {
	width: 550px;
	float: right;
}

.clear {
	clear: both;
}

div.fixed {
	position: fixed;
	background-color: #ddd;
	width: 200px;
	height: 100%;
}

</style>

<!--[if gte IE 6]>
<style type="text/css">

html, body {
	height: 100%;
	overflow: auto;
}

#left {
	margin-left: -100px;
}

div.fixed {
	position: absolute;
}

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

</head>

<body>

<div id="wrapper">
	
	<div id="left">
		<div class="fixed">
			<p>Fixe Navigation! Wichtig 100% height!</p>
		</div>
	</div>
	
	<div id="content">
		<h1>Content</h1>
		<div style="height: 2000px; width: 550px; background-color: #cfcfcf;">Nur zu Simulation von langem content</div>
	</div>
	
	<div class="clear"></div>
	
</div>

</body>

</html>
 
Hi,

setz mal diese Regeln in den beiden Stylesheets ein, und wandel im "Conditional Comment" den gte-Operator (größer-gleich) in lte (kleiner gleich) um, denn der IE7 unterstützt position:fixed:

Code: 
body {
        overflow-y:auto;
}
Code: 
<!--[if lte IE 6]>
<style type="text/css">

html {
        overflow-x:auto;
        overflow-y:hidden;
}

#left {
        margin-left: -100px;
}

div.fixed {
        position: absolute;
}

</style>
<![endif]-->
 
Vielen Dank, das funktioniert schon einmal.

Nur habe ich jetzt wenn ich einmal das Fenster klein ziehe nur noch den Scrollbalken vom body. Der eigentliche vom html fällt dann weg. Kann ich das ganze auch genau umgekehrt machen ?
 
Probier's doch einfach aus:

Code: 
body {
        overflow-y:hidden;
}
Code: 
<!--[if lte IE 6]>
<style type="text/css">

html {
        overflow:auto;
}

#left {
        margin-left: -100px;
}

div.fixed {
        position: absolute;
}

</style>
<![endif]-->
 
Hm funktioniert leider nicht, dann habe ich im normalen (nicht klein gezogenem Zustand keine Scrolleiste mehr. Muss ich wohl noch was rumtüfteln oder mich damit für den IE6 zufrieden geben.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück