footer issue in IE6

[busnut]

G'day, my site has a footer that is suppose to sit at the bottom if by chance the content area is fully taken up by text, but i've just discovered using a friends pc who still has IE6, that this new bit of onclick display script i've added keeps the footer at the bottom, but if the content area extends past the bottom of the page, the footer just sits there and when you scroll up, so does the footer, which can be half way through the text (if that makes sense).

 

Here is my css code, and according to other forums, is correct:

html, body {
height: 100%;
margin: 0;
font-family: Arial;
font-size: 10pt;
background: url(bg-content.gif) repeat;
}

#container {
width: 760px;
position:relative; /* needed for footer positioning*/
margin:0 auto; /* center, not in IE5 */
height:auto !important; /* real browsers */
height:100%; /* IE6: treaded as min-height*/
min-height:100%; /* real browsers */background: #FFFFFF;
border-left: 1px solid #0457A5;
border-right: 1px solid #0457A5;
}

* html #container {
height: 100%;
}

#header {
height:75px;
color: #FFCC00;
background: url('header.jpg') no-repeat;
}

#content {
padding-bottom: 40px; /* bottom padding for footer */
}

#footer {
position:absolute;
width:100%;
height:35px;
bottom:0; /* stick to bottom */
color: #FFFFFF;
text-align: center;
background: #0457A5;
padding-top: 2px;
}

 

And here is the div/javascript stuff for the show/hide info.

<SCRIPT language="JavaScript"> 
<!--
var objElement; 
function switchDiv(strDivName){
if(objElement) objElement.style.display="none";
objElement = document.getElementById(strDivName);
objElement.style.display = "block";
return false;
}
window.onload=function(){switchDiv('loadingLayer1');};
//-->
</SCRIPT>

<a href=# onClick="return switchDiv('loadingLayer1');">ABC</a><br>
<a href=# onClick="return switchDiv('loadingLayer2');">DEF</a><br>

<div id="loadingLayer1" style="display:none;">
<b>ABC</b>
<?
include ("file1");
?>
</div>

<div id="loadingLayer2" style="display:none;">
<b>DEF</b>
<?
include ("file2");
?>
</div>

 

So how do I get the footer to stay literally right at the bottom and not at the bottom of the page in IE6 if the information being included in the div is more than the page height?

[busnut]

Looking closely and playing around, I think it has something to do with this line in the javascript...

objElement.style.display = "block";

 

Any ideas anyone?

[the182guy]

Absolute positioning is well known for causing footer problems.

 

Is it feasible to change your layout structure to use floating for positioning instead of absolute?