Sticky footer bug in Safari

HTML & CSS
1

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

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 :).

3

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:


#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

thanks for the illuminating insights. will see what i can do with them