Hello all,

I will try to be quick with explaining this as best I can. Basically I am developing a new site for a client, and I am using TheManInBlue's footerstickalt method found here: TheManInBlue - footerstickalt. Everything is working fine in Firefox and IE6, however in IE7, the footer seems to want to go to the bottom of the viewport, but not the bottom of the entire page. Because of this, the footer is now pulled way up into the content on longer pages that require scrolling, and it is not resting at the bottom where it should be. You can view the page that I am developing here: MG Forensics test site, and please just view the source to see the HTML.

The CSS I've used is as follows:

html {
height: 100%;
}

body {
height: 100%;
margin: 0;
padding: 0;
background: url(body_bg.gif) repeat-x #527eb6 fixed 0px -150px;
border-top: 2px solid #ffe853;
}

#wrapper {
position: relative;
min-height: 100%;
width: 711px;
margin: 0 auto;
background: url(wrapper_bg.gif) repeat-x #fff 0px 145px;
border-left: 8px solid #7ea0ca;
border-right: 8px solid #7ea0ca;/*073b7d*/
}

#content {
background: url(content_bg.gif) no-repeat 5px 0px;
font-family: "trebuchet MS", tahoma, "Lucida Sans Unicode", verdana;
font-size: 0.8em;
color: #0b4791;
width: 458px;
line-height: 1.7em;
position: relative;
top: 4px;
left: -4px;
float: right;
padding: 20px;
padding-top: 15px;
}

#footer {
position: relative;
margin-top: -51px;
background: url(footer_bg.gif) repeat-x #7ea0ca;
height: 51px;
border-top: 8px solid #7ea0ca;
color: #fff;
clear: both;
}

As I've said, it works perfectly in Firefox and IE6, but IE7 has to come along and totally throw a new wrench in my plans. I can't believe Microsoft sometimes...

Anyways, any help would be GREATLY appreciated, as I'm sure other people will be coming across this same issue too. I have scoured the net for this IE7-specific problem with footerstickalt, and found nothing. I've also tried changing the CSS, but I just can't get anything to work.

Thanks in advance!

georgeM

Thanks axe_sosharp, however I think I've made some headway in the meantime. I kept hammering away at it, and I think I've come to a fix. In my IE-only CSS file, I had set the height of my #wrapper div (non-footer) to 100%, and this seemed to cause IE7 to render it incorrectly. What I did was change it back to:

#wrapper {
min-height: 100%;
}

This min-height: 100% seems to work fine in IE7, but in order for IE5/6 to render it properly (by using {height: 100%;}), I had to end up using conditional tags in the section of my HTML. Here's what that looks like so that IE6 and below get the CSS file of mgf-ie.css, whereas IE7 gets the mgf-ie7.css file. (Side note: Thanks to Microsoft for making my code that much more ugly/bloated, and just not making web designers' lives any easier...):

<!--[if lte IE 6]&gt;
	&lt;link href=&quot;images/mgf-ie.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; /&gt;
&lt;![endif]-->
<!--[if IE 7]&gt;
	&lt;link href=&quot;images/mgf-ie7.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; /&gt;
&lt;![endif]-->

TheManInBlue has closed the comments for his article, and there's not much out there relating to this issue, so I will try to post this fix on my own blog site, as I'm sure it will help lots of others. Thanks again axe_sosharp, and to anyone else willing to help solve this problem, if you have any better fixes, I'd still love to hear them!