Sticky Footer Very Erratic in IE6-7

Please take a look at this page in IE 6.0:

[ist4pos.com...]

The sticky footer does one of three things. It either sticks properly, it cuts the page off at the fold, or it sticks to the bottom of the page but with several inches of white space underneath. If you refresh the page if will change from one to another.

If you click around the site, other pages do this as well, so long as they are long enough to push the page past the fold. I've also noticed that when the footer cuts the page off at the fold, it will often disappear and move back down when I move the cursor towards it.

IE7 usually works but sometimes the footer hovers in the middle of the page.

I can't understand why the same browser on the same computer can render the same page completely differently several times in a matter of seconds.

Here is my CSS. All the relevant stuff is right at the top:


html, body, #outerDiv {height: 100%;}

body > #outerDiv {
min-height: 100%;
}

#main {padding-bottom: 35px;} /* must be same height as the footer */

#footer p {
font-family: Verdana, Geneva, sans-serif;
font-size: .75em;
color: #FFF;
text-align: center;
padding-top: 10px;
}

#footer {
position: relative;
margin-top: -35px; /* negative value of footer height */
height: 35px;
clear:both;
background-color: #CCC;
} 

/* ===== global styles ===== */

h1, h2, h3, h4, h5, h6, p, {
margin: 0;
padding: 0;
}

body {
margin: 0;
padding: 0;
background-image: url(images/backGrad2.jpg);
background-repeat: repeat-x;
text-align:center;
}
#outerDiv #threeColumns #middleColumn ul li ul {
font-size: 16px;
}


p {
font-family: Verdana, Geneva, sans-serif;
font-size: 0.7em;
color: #666;
margin: 0px 0px 10px;
padding: 0px;
list-style-type: square;
line-height: 1.6em;
text-align: left;
}


h1 {
font-family:Cambria, Verdana, Geneva, sans-serif;
font-size:1.4em;
color: #0067AC;
text-align: left;
line-height: normal;
font-weight: normal;
margin-bottom: 2px;
margin-top: 5px;
}
h2 {
font-family: Verdana, Geneva, sans-serif;
font-size: 0.8em;
color: #666;
text-align: left;
line-height: 1.5em;
font-style: normal;
text-transform: uppercase;
font-variant: normal;
margin-bottom: 10px;
font-weight: normal;
margin-top: 0px;
}
h3 {
font-family: Verdana, Geneva, sans-serif;
font-size: 0.7em;
color: #666;
font-weight: normal;
margin-bottom: 7px;
font-style: italic;
}

h4 {
margin-bottom: 10px;
font-weight: normal;
}
/* ===== header ===== */

div#header {
height: 110px;
width: 900px;
position: relative;
background-repeat:no-repeat;
}

div#headerLinks {
float:right;
padding-top: 20px;
}

#header #headerLinks p {
font-family: Verdana, Geneva, sans-serif;
font-size: 12pt;
color: #666;
}


/* ====== image placeholders ===== */

div#navPlace {
width: 900px;
height: 35px;
background-color: #808285;

}

div#topDivider {
width: 900px;
height: 35px;
padding: 11px 0px 3px 0px;


}


div#centralPlace {
height: 135px;
width: 900px;
padding-top: 10px;
}

/* Assorted Page SubDivs */

div#leader1 {
float: left;
width: 220px;

}

div#leader2 {
float: left;
width: 220px;
padding-left: 10px;

}

div#sitemapOne {
float: left;
width: 210px;

}


/* ====== three columns ===== */



div#threeColumns {
margin-top:15px;
}


div#outerDiv {
width: 900px;
margin: 0 auto;
text-align:left;
height: auto !important;
height: 100%;
}


div#leftColumn {
position: relative;
width: 185px;
float:left;
}

div#middleColumn {
width: 480px;
float:left;
text-align: justify;
background-color: #FFF;
padding: 15px 15px;
}

div#rightColumn {
width: 191px;
position:relative;
float:right;
text-align: center;
background-color: #FFF;
padding: 0px;
margin-bottom: 40px;
}

/* ====== partner logo ===== */

div#partner {
margin: 0;
padding-top: 0;
padding-right: 0;
padding-bottom: 35px;
padding-left: 0;
}
#outerDiv #threeColumns #rightColumn #partner img {
}



/* ====== blog/contact button ===== */

div#blog {
padding: 0;
float: right;
width:176px;
margin: 15px 7px 15px 0px;

}

div#contact{
margin: 15px 4px 15px 0;
padding: 0;
float: right;
width:176px;
}

/* ====== social media links ===== */

div#social {
position: relative;
padding-top: 20px;
padding-right: 32px;
padding-bottom: 20px;
padding-left: 0px;
}

#social p {
vertical-align: bottom;
}

#social img {
float: right;
padding-left: 3px;
}

/* ====== float classes ===== */

.fltrt {
float: right;
margin-bottom: 10px;
margin-left: 10px;
margin-top: 10px;
}

.fltleft {
float: left;
margin-top: 10px;
margin-right: 10px;
}

/* ====== Links ===== */

a.graphic:link {
color: #666;
text-decoration: none;
height: 20px;
width: 150px;
background-color: #EEE;
margin-bottom: 2px;
padding: 12px 10px 10px 5px;
display: block;
border-width: 1px 1px 1px 5px;
border-style: solid;
border-color: #0067AC;
}
a.graphic:visited {
color: #333;
text-decoration: underline;
}
a.graphic:hover {
color: #0067AC;
}
a.graphic:active {
color: #0067AC;
} 

a.product:link {
color: #999;
text-decoration: none;
margin-bottom: 3px;
padding-bottom: 3px;
background-image: url(images/link_background.jpg);
background-repeat: no-repeat;
background-position: left top;
padding-left: 10px;
margin-top: 3px;
padding-top: 3px;

}
a.product:visited {
color: #999;
text-decoration: none;
background-image: url(images/link_background.jpg);
background-repeat: no-repeat;
background-position: left top;
margin-top: 3px;
margin-bottom: 3px;
padding-top: 3px;
padding-bottom: 3px;
padding-left: 10px;

}
a.product:hover {
color: #0067AC;

}
a.product:active {
color: #0067AC;

} 


a.trad:link {
color: #0067AC;
text-decoration: underline;
text-align: left;
margin: 0px 0px 10px;
padding: 0px 0px 10px;
font: 11px Verdana, Geneva, sans-serif;
}
a.trad:visited {
color: #999;
text-align: left;
margin: 0px;
padding: 0px;
font: 11px Verdana, Geneva, sans-serif;
}
a.trad:hover {
color: #0067AC;
text-decoration: none;
font: 11px Verdana, Geneva, sans-serif;
}
a.trad:active {
color: #0067AC;
text-decoration: none;
font: 11px Verdana, Geneva, sans-serif;
} 


a.footer:link {
color:#FFF;
text-decoration: none;
}
a.footer:visited {
color:#FFF;
text-decoration: none;
}
a.footer:hover {
color:#FFF;
text-decoration: underline;
}
a.footer:active {
color:#FFF;
text-decoration: underline;
} 
#outerDiv #threeColumns #rightColumn #partner img {
margin-top: 15px;
}
div#download {
margin: 15px 4px 15px 0;
padding: 0;
float: right;
width:176px;
}
#outerDiv #threeColumns #middleColumn ul li {
font-family: Verdana, Geneva, sans-serif;
font-style: normal;
font-weight: normal;
color: #666;
line-height: 1.6em;
padding-top: 0px;
padding-bottom: 4pt;
font-size: .7em;
}

.tablewhiteheads {
font-family: Verdana, Geneva, sans-serif;
color: #FFF;
font-size: .7em;
font-weight: bold;
padding-left: 5px;
}
#outerDiv #threeColumns #middleColumn table tr td p {
margin: 2px;
}
div#contactColumn {
width: 524px;
float:left;
text-align: justify;
margin-bottom: 40px;
background-color: #FFF;
padding: 15px;
}
div#missionColumn {
width: 480px;
float:left;
text-align: center;
margin-bottom: 40px;
background-color: #FFF;
padding: 15px;
}
#outerDiv #threeColumns #missionColumn p {
font: 16px Cambria, Georgia, "Times New Roman", Times, serif;
text-align: center;
margin-bottom: 10px;
}
#outerDiv #threeColumns #missionColumn h1 {
text-align: center;
margin-bottom: 10px;
}
#outerDiv #threeColumns #missionColumn p img {
margin-top: 5px;
margin-bottom: 5px;
}
div#siteMapColumn {
width: 660px;
float:left;
text-align: justify;
margin-bottom: 40px;
background-color: #FFF;
padding: 15px;
}

I use a very simple SSI for the footer text, but I've tried removing this and it doesn't seem to make a difference.

Does anyone have any idea what's going on here? I just don't understand how it can behave so inconsistently in a singular environment.

Thanks!

Tim

Sticky Footer Very Erratic in IE6-7

Behavior of footer changes even when I just refresh

tflavin

tflavin

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week