Question

This is really strange (well, like many IE bugs lol). The page is here. Everything is fine with all modern browsers, but there is an empty space between footer and the bottom of the page on IE6 and IE7. Just can’t imagine what is the reason. I am using IE7.js hack, but doesn’t help here.

The screenshots: IE6 and IE7.

CSS for footer:

#footer {
    background: url("images/footer_bg.png") repeat scroll 0 0 transparent;
    clear: both;
    color: #FFFFFF;
    float: left;
    font-family: 'Special Elite',arial,serif;
    font-size: 13px;
    line-height: 85px;
    margin-top: 90px;
    min-height: 85px;
    text-align: center;
    width: 100%;
}

Any suggestions are appreciated!

Answer 1

remove the float:left from the footer,

then that makes other browsers “collapse” the top margin of the #footer, so if you also add overflow: hidden to the #wrapper it should make them even..

re:bug : the widths for IE6/7 are triggering hasLayout and instead of avoiding that, the overflow on the wrapper makes everyone the same

at least I hope 😉