footer troubles

[michaellunsford]

okay, so the footer is supposed to be at the bottom of the page. The following code seems to work fine UNTIL the content pushes the page below the available window height. When that happens, the footer creeps up over the text at the bottom.

 

Just so you know, FireFox and Opera get it -- no problems. The problem surfaces in IE and Safari.

 

If I add a 99px pading to the bottom of the content area (which pushes the footer into place in IE and Safari), it creates 99px of extra whitespace in FireFox and Opera. What to do?

 

<style type="text/css">
#content {
   min-height:100%;
   margin-bottom:-99px;
}
#footer {
    height:99px;
}
</style>
<div id="content">some content</div>
<div id="footer">footer content</div>

 

live example:

http://new.dougashy.com

[moberemk]

Why do you even need the margin-bottom declaration? It shouldn't be necessary. Try taking it out entirely, unless the footer is positioned with floats.

[michaellunsford]

without the margin-bottom declaration, the height is 100% high, so if the page has 10px worth of content, the footer is off-screen. The footer should be on-screen unless it gets pushed off by enough content.

[moberemk]

Hmm. Try using a -99px top margin to pull up the footer-that might help.

[michaellunsford]

no dice... I went ahead and used the old <!--[if IE 7]> hack to push the main content area down 104px and that fixes IE. Safari actually has a more complicated problem. Depending on how high the screen is in relation to the page, the footer moves (even when resizing the page manually with the mouse).

 

I don't know whether to call this a bug since IE pretty much duplicates Safari's occasional render. It's just weird.