SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2011
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    sticky footer bug in Safari

    if you visit http://mrcpsychmentor.com/ and click on either "About Us" or "Contact Us" you'll see 2 problems with the sticky footer.

    1. the sticky footer overlaps the page content
    2. when you scroll vertically the sticky footer leaves a white gap at the bottom


    you might have to shrink the vertical height of the window to see these effects but if you do you'll see the problems

    regarding a solution, if i put padding on the bottom of some of the content boxes (#question, #leftcol, etc) i can make changes but the weird white gap still remains (& overall the footer behaviour doesn't seem right)

    is this a min-height issue with safari? i'm a bit stumped really, cos i've got the footer to work with every other browser (including IE7, using the * CSS hack)

    anyway, if anyones got any ideas feel free to shout them out. even if they're only "you have a problem with X & Y" as opposed to a solution (i even kinda prefer that sometimes)

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,751
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Your page seems to have none of the key components of a true sticky footer. Base it more on this example.
    http://www.pmob.co.uk/temp/sticky-footer-ie8new.htm

    I'm about to go to class, otherwise I'd give you the changes you need to make. Sorry.

    You shouldn't have needed to give IE7 a separate fix using the star html hack. A sure sign you haven't done this properly from the start .
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,546
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    The white gap at the bottom is because of margin collapse and you need to add a dot into the content property in this rule:
    Code:
    #pagewidth:after {
    	clear:both;
    	display:block;
    	height:1%;
    	content:".";
    }
    The layout overlaps because of the margin-top:-77px on the footer as I explained before. You need to add 77px bottom padding to the last element inside pagewidth to hold the footer at bay. The reason that Firefox doesn't overlap is because it sees the floated content above and as the footer is set to clear it will adjust the top margin so it clears the floats. If you remove the floats then Firefox would overlap also.

    That's why I advocate the negative top margin approach on the main wrapper as shown in shown in the link Ryan posted as it doesn't have these problems (although I believe your multiple background images were too awkward with that approach).

  4. #4
    SitePoint Enthusiast
    Join Date
    Nov 2011
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks for the illuminating insights. will see what i can do with them


Bookmarks

Posting Permissions

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