footerStickAlt

Having the footer stick to the bottom of the viewport is a common client request. Cameron, of The Man in Blue fame, has what should be a useful and flexible CSS solution: footerStickAlt. It's a variation on footerStick by solarDreamStudio. Just one more nail in the coffin of table-based layouts.

Published August 29, 2005 · Updated September 14, 2006
Categorized as HTML and CSS
Short URL: https://snook.ca/s/404

Conversation

4 Comments · RSS feed
1
imran said on November 02, 2005

Hi

can you help me to manage a stick up footer on the website for IE 5.0 + .

As you can see 1 on

http://www.bmw.co.uk

Kind regards

imran Hashmi

2
Emil Björklund said on September 11, 2006

Hi Jonathan. Long time lurker, first time caller, sorry, I mean commenter. I'm trying to implement the footerStickAlt-method to a page I'm working on, works nicely in most browsers but IE7 screws it up by moving the footer up by what seems to be it's own height (as if the negative margin isn't working. Any idea as to what might cause this? The site in question is at http://tingsek.emilbjorklund.com.

3
Jonathan Snook said on September 11, 2006

Emil: currently, you have an ie7-only stylesheet with a margin-top of 0. Therefore, it won't shift the footer up. I'm hoping it's as easy as just removing that. :)

4
Emil Björklund said on September 11, 2006

Jonathan: The margin:0-rule was something I just now tried out to counter the fact that IE7 would shift the footer too far up, over the text. Using margin:0 fixed it, but added the effect that even short pages had a scrollbar, as the footer was positioned under the 100%-height window... On the other hand I think I found a viable solution right now: Since the footer already has relative positioning, i shifted it downwards by using "top:10em;", which compensated for the mistreatment of 8ems of negative margin + roughly the 20px margin that IE7 also ignored, but still kept the document flow intact.

Phew. Long explanation, and I'm still not satisfied. To top it off, I just discovered IE7 scales background-images, and my entire layout fails in IE7 when you change text size. Off topic, but what to do about that...?

Anyhow, thanks for the quick response.
//emil, very tired and up late in sweden

Sorry, comments are closed for this post. If you have any further questions or comments, feel free to send them to me directly.