SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2011
    0 Post(s)
    0 Thread(s)

    page content overlaps sticky footer in IE7 & safari

    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)

    menu page (1024x768 safari).jpgmenu page (1024x768 Firefox).jpgmenu page (1024x768 IE7 compat mode).jpg

    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. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Whiteford, Maryland, United States
    11 Post(s)
    0 Thread(s)
    Hi, you aren't properly doing a sticky footer. Try adding these changes and see how it helps

    	height:100%;/*allow 100% min height to work*/
    { /*Opera fix*/
    	content: "";
    	float: left;
    	height: 100%;
    	margin-top: -32767px;
    	width: 0;
    	margin-top:77px;/*height of footer. 10px top footer padding + 66px height*/
    	min-height:100%;/*true sticky footer*/
    	margin-top:0;/*remove what you had*/
    Always looking for web design/development work.


Posting Permissions

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