footer overlapping content in IE7? :(

Question

Hi, I thought I'd got this layout working thanks to the wonderful people taking part in stackoverflow, see here. Unfortunately though I've found an issue in IE7 (haven't checked in IE6!) - the footer is overlapping the content

I've put the site up on my development server here. I hope I won't have to start again from scratch to get it to work and that CSS will come to the rescue...

Answer 1

A quick and easy way to push the footer to the bottom of the viewport is to use the following JavaScript. The trick is to have a separate container and a footer, and reference these ids in the script:

In the head tag:

<script type="text/javascript"> <!-- window.onload = function() { setFooter(); } window.onresize = function() { setFooter(); } //--> </script>

And the script:

try {
    document.execCommand("BackgroundImageCache", false, true);
}
catch (err) {

}

function getWindowHeight() {
    var windowHeight = 0;
    if (typeof (window.innerHeight) == 'number') {
        windowHeight = window.innerHeight;
    }
    else {
        if (document.documentElement && document.documentElement.clientHeight) {
            windowHeight = document.documentElement.clientHeight;
        }
        else {
            if (document.body && document.body.clientHeight) {
                windowHeight = document.body.clientHeight;
            }
        }
    }
    return windowHeight;
}
function setFooter() {
    if (document.getElementById) {
        var windowHeight = getWindowHeight();
        if (windowHeight > 0) {
            var contentHeight = document.getElementById('container').offsetHeight;
            var footerElement = document.getElementById('footerContainer');
            var footerHeight = footerElement.offsetHeight;
            if (windowHeight - (contentHeight + footerHeight) >= 0) {
                footerElement.style.position = 'relative';
                footerElement.style.top = (windowHeight - (contentHeight + footerHeight)) + 'px';
            }
            else {
                footerElement.style.position = 'static';
            }
        }
    }
}