Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Dec 2011
    Posts
    25
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Angry Sticky footer pushed to far down in firefox and safari, not chrome

    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/

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,682
    Thanks
    22
    Thanked 1,828 Times in 1,812 Posts
    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.

    Still looking at your method...
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    LimeX (01-23-2012)

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,682
    Thanks
    22
    Thanked 1,828 Times in 1,812 Posts
    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.
    Last edited by Excavator; 01-23-2012 at 07:30 PM. Reason: killed the links
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    LimeX (01-23-2012)

  • #4
    New Coder
    Join Date
    Dec 2011
    Posts
    25
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Thank you for your advice!
    I have now removed the Full-height page layout tricks!
    I was following this (http://www.cssstickyfooter.com/using...oter-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?

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,682
    Thanks
    22
    Thanked 1,828 Times in 1,812 Posts
    Quote Originally Posted by LimeX View Post

    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    LimeX (01-23-2012)

  • #6
    New Coder
    Join Date
    Dec 2011
    Posts
    25
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Smile

    Overlfow:auto; PRoblem solved. Thank you once again!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •