Hoi,
Internet Explorer 6 werkt weer eens niet mee.
Op fixed header en footer pagina blijft de footer staan in IE6.
Mijn code (ingekort):
[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">
<head>
<title>Fixed header and footer</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">
body{
margin:0;
padding:100px 0 20px 0;
background-color: blue;
}
div#header{
position:absolute;
top:0;
left:0;
width:100%;
height:100px;
background-color: red;
}
div#footer{
position:absolute;
bottom:0;
left:0;
width:100%;
height:20px;
background-color: lime;
}
@media screen{
body>div#header{
position:fixed;
}
body>div#footer{
position:fixed;
}
}
* html body{
overflow:hidden;
}
* html div#content{
height:100%;
overflow:auto;
}
div#content{
background-color: orange;
</style>
</head>
<body>
<div id="header">
Header </div>
<div id="footer">
Footer </div>
<div id="content">
Content <br />
TestRegel<br />
...
TestRegel<br />
LaatseTestRegel </div>
</body>
</html>
[/code]
Screenshots:
Screenshot in: IE6 Nr: 1
Screenshot in: IE6 Nr: 2 <= IE6 fout
Screenshot in: IE7 Nr: 1
Screenshot in: IE7 Nr: 2 <= zo zou het er uit moetten zien
[size=small](de schreenshots van IE7 zijn het zelfde als in opera 9 en in firefox 2)[/size]
Weet iemand hoe je de groene footer ook in IE6 op zijn plek kan krijgen?
Want in "Screenshot in: IE6 Nr: 2" zou de groene balk onderop moetten staan (in het blauwe vak dus)
En de Header zou ook altijd in beeld moettten zijn
Alvast bedankt,
-Ryan-
Solution:
Ik heb zojuist een manier gevonden, je zet het volgende helemaal boven in je html:
[code]<!-- IE in quirks mode -->[/code]
IE6 doet dan het volgende:
Screenshot in: IE6 Nr: 3