footerStickAlt - positioning a footer with CSS

Cameron Adams has come up with footerStickAlt, a slight modification of the footerStick method for positioning a footer with CSS.

I’m still seeing a couple of glitches: it doesn’t work in OmniWeb (though that will probably take care of itself when OmniWeb is updated to use a more recent rendering engine), it doesn’t work very well in IE/Mac (not a serious problem as that browser is very close to falling off my CSS support chart), and I get a vertical scrollbar in Gecko browsers even when the content is shorter than my window is tall.

The last issue is definitely the most important one, so I took a quick look at it and found that specifying a height for the footer instead of relying on the browser to calculate it will fix the problem. I’m guessing that like so many other odd issues with the Gecko rendering engine this is caused by a rounding error.

Anyway, it seems like the fix was pretty easy.

Posted on September 3, 2005 in CSS, Quicklinks

Comments

  1. I really wonder if this is necessary (or am I missing something here)?

    Why not just use, for instance, this: position: fixed; bottom: 2em;

    Yes, I know, that won’t work in the current versions of IE in Windows, but for that I use expressions in an IE-only CSS.

  2. September 4, 2005 by Roger Johansson (Author comment)

    Robert: position: fixed works if you want the footer to be visible in the viewport at all times. That is not what footerStickAlt is about - it is a way of positioning the footer at the bottom of the viewport if there is not enough content, and at the bottom of the page if there is more content than fits in the viewport. You know, that old table-based, invalid markup look.

  3. You know, that old table-based, invalid markup look.

    Ha ha, ok! :-)

    Then I get it.

  4. Hi

    can you hel 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

    thanks

  5. November 2, 2005 by Roger Johansson (Author comment)

    Imran: Check out the article I linked to for instructions :-).

Comments are disabled for this post (read why), but if you have spotted an error or have additional info that you think should be in this post, feel free to contact me.