Sticky Footer Issue in IE7

[mediamole]

I’m having a problem with sticky footer when viewed in IE7 whereby it’s showing a scroll bar when the data overflows. I don’t get this issue in other browsers apart from IE7.

Any ideas? I thought was a padding or margin issue causing a footer height calculation issue, but I think I’m wrong.

You can see the issue at preview page Your text to link…

CSS FOR STICKY FOOTER:

html, body {height: 100%;}



body {

font-size:62.5%; /* Sets base font at 10px */

font-family: Arial, Verdana, sans-serif;

color:#0B3F6D;

margin:0; padding:0;

text-align:center;

background:#E0E3E5 url("country-image-lowres.jpg") no-repeat center top;



}

etc...



then



/* WRAPPER */



#wrapper { width:985px; margin:0 auto;

background:url("chandlery-logo.png") no-repeat top left;

padding-left:105px; text-align:left;

min-height: 100%;

}



#main { width:985px; overflow:auto;

padding-bottom: 220px;

}



..... etc



Then



#footer { background:#2D5099 url("footer-border-top.gif") repeat-x top left;

height:220px;

width:100%;

margin-top: -220px; /* negative value of footer height */

text-align:left;

clear:both;



}

[Smitty]

#main is set to overflow: auto, which creates a scrollbar. Try setting to overflow: hidden. Also, your footer is acting weird when the browser is less than ~1125px wide, causing a scroll bar and the footer doesn’t reach past the edge of the page before scrolling.

ps. I think this may be what is causing it but I’m not positive, I saw it in Chrome, but it was hidden under the footer.

[mediamole]

Yeah I think you’re right I’ve got issues with margins and the footer.

[Author]

Posts