...

View Full Version : Sticky footer pushed to far down in firefox and safari, not chrome



LimeX
01-22-2012, 09:04 PM
I have a problem where my "sticky footer" get's pushed too far down in some browsers. I have tried solving it in many ways, without any success. Please help me! :)

http://www.blackoctal.com/caroline_test/

Excavator
01-22-2012, 10:13 PM
Hello LImeX,
I'm not familiar with this method of making a full-height layout. Were you following a tutorial or using a template for this?

I usually use this method for making a full-height layout (http://nopeople.com/CSS%20tips/full-height-layout/index.html).

Still looking at your method...

Excavator
01-22-2012, 11:57 PM
I whipped up a couple demos for you.
Normally, a full-height layout has the header on top and the footer on the bottom, even when there is not enough content on the page to push the header down.
See demo1 (#).

In your layout though, with that 500px tall footer, when there is no content there is not a lot of whitespace between the header stuff and footer stuff. I think you will always have enough content to push the footer down.
If that is the case, why complicate things with an unnecessary full-height layout?
Have a look at demo2 (#) and see if that simplifies things for you.

LimeX
01-23-2012, 05:44 PM
Thank you for your advice!
I have now removed the Full-height page layout tricks!
I was following this (http://www.cssstickyfooter.com/using-sticky-footer-code.html) tutorial, and while building the page from scratch my first thought was to make the footer about 100px :P
Thankyou! :)

But as I edited the CSS rules I realised that another problem have occured.
As you can see the wrapper doesn't acctually wrap. Any ideas? :)

Excavator
01-23-2012, 05:52 PM
But as I edited the CSS rules I realised that another problem have occured.
As you can see the wrapper doesn't acctually wrap. Any ideas? :)

I think I'm not seeing your current version online.
It sounds like you are describing an element with uncleared floats though. See this explanation of how overflow: auto; clears your floats (http://www.quirksmode.org/css/clearing.html).

LimeX
01-23-2012, 06:06 PM
Overlfow:auto; PRoblem solved. Thank you once again! :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum