nicht angemeldet
Footerproblem IE 6.0
Hallo zusammen
Ich hab ein kleines Layout gebastelt das zentriert aufgebaut ist und dessen footer immer am unteren Bildschirmrand klebt.
Klappt so wunderbar in Firefox, IE, Opera....
Sobald ich aber ein unsichtbares Div nehme und sichtbar mache (mithilfe JavaScript....)...funktioniert immer noch alles wunderbar in Firefox 1.5, 2.0, Opera 9.01, IE 7....
Nur eben nicht im Internet Explorer 6! Dort bleibt mein Footer einfach an der Position stehen an den ich ihn platziert habe... hängt sozusagen in der Luft.
Isses nen Bug? Bin ich zu blöde? Sollte ich div's anders als mit "display:" verstecken?
Hier der Quellcode (kann direkt als .html abgespeichert und ausprobiert werden), dann ist sofort klar was ich meine...
------------------------------------------
<!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>Beispieltemplate</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script type="text/javascript">
function expandit(curobj, hide) {
if(document.getElementById(curobj)) {
folder=document.getElementById(curobj).style;
} else {
if(ns6==1||operaaa==true) {
folder=curobj.nextSibling.nextSibling.style;
} else {
folder=document.all[curobj.sourceIndex+1].style;
}
}
if(folder.display=="none")
{
folder.display="";
} else {
folder.display="none";
}
if(hide) {
var hide_objects = hide.split(",");
for(i=0; i < hide_objects.length; i++) {
hide_objects[i]=hide_objects[i].replace(/^\s*(.*)/, "$1");
hide_objects[i]=hide_objects[i].replace(/(.*?)\s*$/, "$1");
if(document.getElementById(hide_objects[i])) {
hidden=document.getElementById(hide_objects[i]).style;
if(hidden.display=="") {
hidden.display="none";
}
}
}
}
}
</script>
<style type="text/css">
*{
padding:0;
margin:0;
border:0;
}
html, body{
height: 100%; /* wichtig */
font:10px Verdana, Arial, sans-serif;
color: #000;
background:#eec;
text-align:left;
}
#outer_wrap{
width:958px;
margin:0 auto;
border-width: 0px 1px;
border-color: black;
border-style: solid;
position: relative;
min-height: 100%;
height:auto !important;/* moderne Browser */
height:100%; /* IE */
background: #fff;
}
#header{
padding-left:0px;
height:149px;
background: #dca;
}
#footer{
position: absolute;
bottom: 0px;
width:100%;
height:20px;
background: #ddc;
}
#inner_wrap{
float: none;
width:100%;
border:0px;
background: #ccf;
padding-bottom:20px; /*wichtig! an "footer"-height anpassen*/
}
#navigation{
position: relative; left: 0px; top: 0px;
float: left;
width:247px;
background: #daa;
}
#content{
position: relative; left: 0px; top: 0px;
float:left;
width:711px;
background: #add;
}
</style>
</head>
<body>
<div id="outer_wrap">
<div id="header">
header
</div>
<div id="inner_wrap">
<div id="navigation">
navigation<br /><br /><br /><br />Ich bin die Navigation<br /><br />
<!-- BEGIN just for testing -->
<div onclick="expandit('expand1')">Click me! (Vergrössern)</div>
<div style='display:none' id='expand1'><br />testinhalt<br />testinhalt<br />testinhalt<br />testinhalt<br />testinhalt<br />testinhalt<br />testinhalt<br />testinhalt<br />testinhalt<br />testinhalt<br />testinhalt<br />testinhalt<br />testinhalt<br />testinhalt<br />testinhalt<br />testinhalt<br />testinhalt<br />testinhalt<br />testinhalt<br />testinhalt<br />testinhalt<br />testinhalt<br />testinhalt<br />testinhalt<br />testinhalt<br />testinhalt<br />testinhalt<br />testinhalt<br />testinhalt<br />testinhalt<br />testinhalt<br />testinhalt<br />testinhalt<br />testinhalt<br />testinhalt<br />testinhalt<br />testinhalt<br />testinhalt<br />testinhalt<br />testinhalt<br />testinhalt<br />testinhalt<br />testinhalt<br />testinhalt<br />testinhalt<br />testinhalt<br />testinhalt<br />testinhalt<br />testinhalt<br />testinhalt<br />testinhalt<br />testinhalt<br />testinhalt<br />testinhalt<br />testinhalt<br />testinhalt<br />testinhalt<br />testinhalt<br />testinhalt<br />testinhalt<br />testinhalt<br />testinhalt<br />testinhalt<br />testinhalt<br />testinhalt<br />testinhalt<br />testinhalt<br />testinhalt<br />END</div>
<!-- END for testing -->
</div>
<div id="content">
content<br /><br /><br /><br />Ich bin der Inhalt<br /><br />
<!-- BEGIN just for testing -->
<div onclick="expandit('expand2')">Click me! (Vergrössern)</div>
<div style='display:none' id='expand2'><br />testinhalt<br />testinhalt<br />testinhalt<br />testinhalt<br />testinhalt<br />testinhalt<br />testinhalt<br />testinhalt<br />testinhalt<br />testinhalt<br />testinhalt<br />testinhalt<br />testinhalt<br />testinhalt<br />testinhalt<br />testinhalt<br />testinhalt<br />testinhalt<br />testinhalt<br />testinhalt<br />testinhalt<br />testinhalt<br />testinhalt<br />testinhalt<br />testinhalt<br />testinhalt<br />testinhalt<br />testinhalt<br />testinhalt<br />testinhalt<br />testinhalt<br />testinhalt<br />testinhalt<br />testinhalt<br />testinhalt<br />testinhalt<br />testinhalt<br />testinhalt<br />testinhalt<br />testinhalt<br />testinhalt<br />testinhalt<br />testinhalt<br />testinhalt<br />testinhalt<br />testinhalt<br />testinhalt<br />testinhalt<br />testinhalt<br />testinhalt<br />testinhalt<br />testinhalt<br />testinhalt<br />testinhalt<br />testinhalt<br />testinhalt<br />testinhalt<br />testinhalt<br />testinhalt<br />testinhalt<br />testinhalt<br />testinhalt<br />testinhalt<br />testinhalt<br />testinhalt<br />testinhalt<br />testinhalt<br />testinhalt<br />END</div>
<!-- END for testing -->
<div style='clear:both;'><img src='/images/spacer.gif' alt='' height='0' /></div>
</div>
<div style='clear:both;'><img src='/images/spacer.gif' alt='' height='0' /></div>
</div>
<div id="footer">
footer
</div>
</div>
</body>
</html>
-
Niemand eine Ahnung? Ich probier das jetzt schon seit ich weiss nicht wann zu beheben... no chance... Wäre wirklich dankbar wenn jemand auch nur eine Idee hätte...