Grow your CSS skills. Land your dream job.

Sticky Footer becoming Mental Health Issue…

  • # June 7, 2009 at 1:06 pm

    Hi Guys and Gals,

    I beg of you, please, please, tell me what’s wrong with my @#$%&*>! footer. I’ve been looking at it for so long now, I probably couldn’t see the answer if it stared me in the face. It will not go to the bottom of the page (not screen) where it belongs – it won’t, doesn’t want to, will not try, FAILS. :cry:

    I’ve used Fait’s Sticky Footer, as well as the clearfix method, and neither will force my page-wrap beyond the height of my screen. What stupidly obvious mistake have I made with the following code?

    Quote:
    * { margin: 0; padding: 0; }
    html, body { height: 100%; }

    #page-wrap { width: 960px; position: relative;
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -300px; }

    .footer { height: 300px; width: 960px; background: 0d2819; clear: both;
    position: absolute; bottom: 0px; margin: 0 auto; }
    .push { height: 300px; }

    It’s a site(my first!) I’m building for my dad about ponies – you can see it @ http://www.ashbrookstud.ie with the footer reduced to a 1px no-background empty travesty. I know you guys are probably sick of answering Sticky Footer problems, but know that I really appreciate any help – however small! – I can get with this. I want the site to be right.

    Thanks in advance

    Éamonn

    # June 7, 2009 at 1:41 pm

    Validating your code would be a good place to start http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fashbrookstud.ie%2F
    I don’t really see why you need to use any special techniques to force the footer to the bottom of the page, you seem to have plenty of content on all the pages, although only the home page appears to have a footer. I would just include it inside the page wrap.

    # June 7, 2009 at 2:04 pm

    Oops ! 23 errors! Now you’ve gone and embarrased me in front of everyone! :D

    Thanks though, I had no clue I had built up so many errors!

    None of the other pages have a footer precisely because I can’t seem to get one to work.
    I see what you mean about just including it manually as a div, but it still doesn’t stick to the bottom of the page. A bottom 0px positioning won’t do it because my page wrap doesn’t extend beyond the bottom of the screen. That’s the crux of it – if I can just get that wrap to extend I’m sorted.

    # June 7, 2009 at 2:33 pm

    Your page is so tall… I’m not really seeing any reason for using the sticky footer method here. Are there some pages I’m not seeing that are really short?

    # June 7, 2009 at 2:51 pm

    Nope, they’re all screen-height+. There’s no particular reason that I need a footer per se, but I tried to put one in to tie up the layout nicely. Then it didn’t work. Several times. Cue madness.

    I have tried to just put in a ‘footer style’ div after the content and sidebar divs and before closing off the page-wrapper. The problem seems to be that the content of those divs is overflowing downward rather than extending their boxes, so a following ‘footer’ div just sits halfway up the screen. For obvious reasons I can’t put an absolute value on their height though – would an overflow:hidden attribute or some such force them down?

    Aside from that, the sticky footer method should work. I can’t figure out why it doesn’t for the life of me. I thought I’d ask ye good gentlemen to put me out of my misery!

    # June 7, 2009 at 2:57 pm

    I’m pretty sure the problem is somewhere in your markup, you either have one extra div opening or one too few closing div. The best I can suggest at the moment, and it will be a right royal pain, is to go through your markup commenting every closing div to make sure you have them all in the right place.
    eg.

    Code:

    etc.

    # June 7, 2009 at 3:14 pm

    Sounds like it. Oh well… I’ll give it a go and let ye know how I get on.

    Thanks Lads!

    # June 7, 2009 at 6:31 pm

    Got it! Whoo Hooooo! I knew it’d turn out to be something stupid – Prob wasn’t with open divs, it was with some elements being absolutely positioned and thus being ignored by the footer div. All relatively positioned now and living happily together. For now….Dum Dum DUUUUUUMMMM!

    Thanks a million guys, I really do appreciate ye rowing in. I know where to come crying to now :D ! I’m going to put the site into the review section when I’ve the footer dickied up, so when ye see it up, let me have it with both barrels…

    Éamonn.

    P.S. Why is the crux of the bicuit an apostrophe?

    Rob
    # June 7, 2009 at 6:35 pm
    "EamonnMac" wrote:
    P.S. Why is the crux of the bicuit an apostrophe?

    <mysticalness type="smoke/waving">

    Ahh the answer of enlightenment – if you have to ask the question my son, you are not ready to hear the answer…

    </mysticalness>

    # June 7, 2009 at 6:50 pm

    lol! Classic… "close mysticalness" :ugeek:

    I learn at the feet of the masters.

    # June 7, 2009 at 10:41 pm
    Quote:
    P.S. Why is the crux of the bicuit an apostrophe?

    Frank Zappa from the 1974 album Apostrophe http://www.bestlyric.com/lyrics/Frank%20Zappa/Stink%20Foot/4B17195852267376036E41 8-)

    Rob
    # June 8, 2009 at 5:13 am

    lol best thread ending – ever.

Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".