45 Comments
- Photoblog, on 10/12/2007, -0/+51interesting, but why the hell did you use text on and image for the site???
- Gzero, on 10/12/2007, -1/+42This has already been done, and even improved upon: http://www.themaninblue.com/writing/perspective/2005/08/29/
- jgc7, on 10/12/2007, -1/+35Nice try, but that won't work for anything but the simplest of layouts. The offending css is:
html, body {
height: 100%;
} - spectre_25gt, on 10/12/2007, -8/+27WTF?!
Forget it. I quit. - inactive, on 10/12/2007, -1/+14I hate websites that don't let you highlight the text.
- diznang, on 10/12/2007, -1/+14That caught me off guard, too. It looks like he's using image replacement for everything except for the footer.
Maybe this works, but why does the messenger have to present this in such an odd way?
And why not show source code without me having to view source? - drewhenson, on 10/12/2007, -0/+13gzero knows where to get the real *****.
- ajchavar, on 10/12/2007, -0/+10i'm just now learning CSS, can someone explain what a sticky footer is to me?
/noob - Gzero, on 10/12/2007, -1/+11Usually, a footer just appears right after wherever your content ends. With a sticky footer, it'll be at the bottom of your window no matter how short your content is.
- t0ken, on 10/12/2007, -0/+9or, you could use dom scripting and do it without using hacks...
http://www.alistapart.com/articles/footers/ - jerrygofixit, on 10/12/2007, -0/+9Buried as inaccurate, doesn't stick to my foot at all...
- blaze03, on 10/12/2007, -3/+11Why the hell is he using image replacement for something as simple as plain text?
- HigherLogic, on 10/12/2007, -1/+8Here are some better examples, though if you were developing a site that people actually needed to use, you wouldn't do this:
http://cssplay.co.uk/layouts/fixit.html
http://cssplay.co.uk/layouts/bodyfix.html
http://cssplay.co.uk/layouts/body2.html
http://cssplay.co.uk/layouts/body4.html
http://cssplay.co.uk/layouts/body5.html - wedges, on 10/12/2007, -1/+7!important? !sloppy
- sheepster, on 10/12/2007, -0/+6works for me =)
- QueenBeeCassi, on 10/12/2007, -0/+6it doesn't stick in my firefox browser either.
- Schlaefer, on 10/12/2007, -1/+6Dugg down for putting a copyright tag on five lines of CSS. I'm sure somebody is out to patent it already...
- cracell, on 10/12/2007, -2/+7The "sticky" footer on the page, doesn't stick in firefox for me....WTF Firefox 2.0.0.3, possibly an extension causing the issue but I doubt it. This sucks.
- danielxmorris, on 10/12/2007, -0/+5I think he's used an image because he likes the Myriad typeface. Using: font-family: 'Myriad',... would only work when viewed on a Mac, so he has used an image instead.
- EvilCowSan, on 10/12/2007, -0/+4What does sticky specifically mean? Because when i read it i thought that the footer would be visible at all times regardless of where you are in the page, but it doesn't do that for me. If it mean it stays at the bottom of the content then yeah it does that...
EDIT: Ah I shoulda kept reading, Gzero explains it well "it'll be at the bottom of your window no matter how short your content is." - diznang, on 10/12/2007, -0/+4While we're at it...
I hereby claim all rights to use of "a:hover". You may not use it without my written permission. - hyperden, on 10/12/2007, -0/+3This will only work for basic stuff. Oh well. nice try.
- codyodell, on 10/12/2007, -0/+2works for me too.
- whoisKeel, on 10/12/2007, -0/+2Does for me. Firefox 2.0.0.3
- phenom2k7, on 10/12/2007, -0/+2Buried for the excessive use of images where it isn't necessary.
- joaob, on 10/12/2007, -0/+2Sitepoint called....they want Catfish back and asked a couple of questions about your claimed copyright.
- jazbek, on 10/12/2007, -0/+1I think you're misunderstanding the "sticky footer" (I did at first).. it's not supposed to be stuck to the bottom of the window at all times, only if the content is shorter than the window. If the content is longer than the window, then the footer will be below it.
- smitjel, on 10/12/2007, -0/+1For the people saying that it doesn't work...are you sure you understand the meaning of "sticky footer" in this case? It doesn't mean that it will overlap content no matter how small your window is. All it's doing is sticking to the bottom of the window when the content on the page is small. You will get a scroll bar if you shrink your browser small enough. But when you expand the window taller than the content, the footer sticks to the bottom.
But yeah, like someone already said, this is nothing new. Pretty cool trick for simple designs anyway.
http://www.themaninblue.com/writing/perspective/2005/08/29/
- greatblackowl, on 10/12/2007, -0/+1Is that even supposed to be a sticky footer on the bottom of the page? It seems like it would, but he never said it was intended to be one.
EDIT: FF 2.0.0.3, Opera 9.2, IE 7 - doesn't stick for any - looper, on 10/12/2007, -0/+1Doens't stick for me in Firefox 2.0.0.3 if I resize small, I just get a scroll bar.
Look at my solution at http://www.ianandwendy.com/OtherTrips/BotswanaNamibia/Botswana/ Sticky footer adbar in a centered float element with a main pane with thumbnails that float around according to browser width. Works in IE/FF/I think Opera.. although I think IE has problems at 800 x 600 - but are there any digg readers at 8x6???
Just please don't look at my source. I'm a CSS hack, and not a very good one, but I slammed that together... - insub2, on 10/12/2007, -0/+1A Sticky Footer is at the bottom of the viewport *unless* the content of the page pushes it down. If the content fills the viewport (part of browser where the webpage is visible), then the Sticky Footer will remain at the bottom of the document and be pushed down out of the view port.
- j138abstract, on 10/12/2007, -0/+1lame and broken in ie7
- Tibin05, on 10/12/2007, -0/+1"There are no terms, licenses, fees or requirements. Use it as you will."
but then he says...
"All rights reserved. You may not reproduce this example without written permission"
Am I missing something? - ryanfait, on 10/12/2007, -1/+2Sorry, the terms are a little bit vague. To use it, you don't need to include any of the copyright info in the CSS document, link to me, or reference me in any way. I'll try to clear it up a little bit on the example. I just don't want people reproducing the example itself, but I have no problem with the code being used on commercial or personal sites without mention of me.
And I removed the image replacement since some didn't like that! I'm working in the FF thing, but I cannot seem to reproduce the problem. Anyone care to list more details about their settings and any plugins they have installed? I'm trying! - h4rp, on 10/12/2007, -0/+0Stole my thunder! By far the best way to achieve a sticky footer.
- 47knight, on 10/12/2007, -3/+3That's because the whole site is composed of images...
BTW, this isn't working for me in FF. - thomasjordan, on 10/12/2007, -1/+1It sort of works, but its a little quirky in Safari. It does not always move to the very bottom of the window... maybe using some js to force a redraw of the page would do it.
- smitjel, on 10/12/2007, -0/+0It does work...maybe you don't understand the meaning of sticky footer in this case?
http://digg.com/design/A_CSS_Sticky_Footer#c6232470 - ericrank, on 10/12/2007, -1/+0Close, but no cigar.
You'll get a scrollbar if you have a bottom margin on a block level element. Try killing all of the extraneous css not related to the sticky footer, and set a margin on a paragraph (Like p{ margin:1em 0;}) . This is exactly the same thing that happens on the maninblue sticky footer example too. I've got a solution that has worked for me that I've been meaning to write an article about, and this might just be the impetus. - spinball, on 10/12/2007, -1/+0Now I have somewhere to put my waving flag and opening mailbox animated gifs. It's a step backwards for web design.
- TheActionCombo, on 10/12/2007, -2/+0How does this have over 1100 Diggs!? WHO IS DIGGING THIS?
The CSS doesn't work and the site uses images to replace text. - AlexApetrei, on 10/12/2007, -5/+2It's usless , no good will come of it.
- digginghacker, on 10/12/2007, -7/+2...noob
- rompom7, on 10/12/2007, -10/+3Doesn't work for me in Firefox 2.0.0.3. It gets stuck below the bottom of the window, so you still have to scroll down.
Also, why are we getting CSS tips from someone that renders images for text.
OK, this is lame. - spectre_25gt, on 10/12/2007, -23/+2Damnit, wrong reply...


What is Digg?