Footer to stay at the bottom

[damasta]

I have a footer. I was wondering if it is possible to have it always at the bottom. I hope my question is clear. But here is an example: http://jimmyjazz.homeip.net:808/listenwavy/
If you make the browser window small, you can see the footer goes on top of the body. I'd like for it to always remain below the body and at bottom of the page. How can that be accomplished? Thanks.
FYI, not my site by the way.

[bpat1434]

The site is 100% CSS (Thank god!!) and they use this footer code:
#footer{
position: absolute;
bottom:1px;
left:0;
background: transparent url('footer2.jpg') repeat-x top left ;
width: 100%;
height:56px;
}
#footerinsert{
background: transparent url('footer1.jpg') no-repeat top left ;
width:auto;
height:57px;
}
#footertext{
padding-top:35px;
padding-left:130px;
color:#dee2e6;
font-size: xx-small;
}

And it's used in this way:
<div id='footer'>
<div id='footerinsert'>
<div id='footertext'>This site was made with 100% open source
software in <a href="http://ubuntu.com/">UBUNTU Linux</a>.</div>
</div>
</div>

The code to keep the footer at the bottom is this:
#footer{
position: absolute;
bottom:1px;
}

You can read more on positions at the w3 schools webpage: w3 Schools (http://www.w3schools.com).

~Brett

[damasta]

Okay, it works properly in Firefox but not in IE as evident here: http://www.geocities.com/bdptcob/ss.JPG. Any idea how to workaround IE's incompetence?

[bpat1434]

What does your code look like? No matter what I do, I can't get the footer to move up like you do. It's absolutely positioned, so it shouldn't matter which browser you use.

~Brett

[bpat1434]

And I was wrong!!! ;)

So to keep it at the bottom, you need to use the "fixed" position, not absolute. But unfortunately IE doesn't support the fixed position. :(

So the work around is to hide the "fixed" position declaration with a small hack, and in IE just leave it absolutely positioned and put it below everything else (like z-index: 1).