Page content overlaps sticky footer in IE7 & safari

HTML & CSS
1

the 3 screenshots below show how the page contents overlap the (sticky) footer in Firefox (v10), IE7 (compatibility mode) & Safari for Windows (v5.1.4)

you can also see the behaviour for yourself if you visit the site, scroll down & click the ‘Demo’ button (it’ll take you to the page). but you’ll have to set your monitor to 1024x768 i think

regarding a solution, i’m thinking of either putting some giant padding on the div’s (id=question or something) or setting a minimum height for the div/divs. & then targeting IE7 only with the * hack, & maybe another approach for targetting safari. is this sensible?

i don’t know why the problem is arising, so i thought i’d ask in case anyone knew. a problem understood being a problem avoided in future & all that

2

Hi, you aren’t properly doing a sticky footer. Try adding these changes and see how it helps :slight_smile:


html,body
{
	height:100%;/*allow 100% min height to work*/
}
body:before 
{ /*Opera fix*/
	content: "";
	float: left;
	height: 100%;
	margin-top: -32767px;
	width: 0;


}

#pagewidth
{
	margin-top:77px;/*height of footer. 10px top footer padding + 66px height*/
	min-height:100%;/*true sticky footer*/
}
#footer
{
	margin-top:0;/*remove what you had*/
}