Search code examples
htmlcssjquery-uiinternet-explorer-9sticky-footer

jquery-ui interfering with css on page load in IE9

I am trying to apply this sticky footer pattern to my template:

http://ryanfait.com/sticky-footer/

But in Internet Explorer 9, I am seeing a scroll bar, and if I scroll down lots of white space appearing below the footer:

White space

It gets even weirder, as I stripped more and more out of my template until I was left with just basic layout, bootstrap, footer css, jquery and jquery-ui.

Jquery and jquery-ui libraries are merely included in the head, no other java script loads that could call them.

The problem still manifests, until I remove jquery-ui from the head. Then the page renders ok.

Here are some live examples:

With jquery-ui

Without jquery-ui

Also, the white space disappears if I resize the window. Clutching at straws I've even tried triggering $(window).resize() on page load, but no such luck.

Does anyone have any idea why oh why internet explorer 9 is adding this mysterious white space and how to make it stop? I thought IE9 was supposed to be the most compliant of the IE species...

Thanks for any help, I've been pulling my hair out all day over this issue.

Solution

  • Resorted to debugging jquery-ui, found some obscure code that runs on document ready that appends a div to the end of a page to fix a 3 year old IE6 issue!

    jQuery UI 1.8.17 Line 225:

    var body = document.body,
        div = body.appendChild( div = document.createElement( "div" ) );

$.extend( div.style, {
        minHeight: "100px",
        height: "auto",
        padding: 0,
        borderWidth: 0
});

$.support.minHeight = div.offsetHeight === 100;
$.support.selectstart = "onselectstart" in div;

// set display to none to avoid a layout bug in IE
// http://dev.jquery.com/ticket/4014
body.removeChild( div ).style.display = "none";

    Removing this fixes my problem, I think IE9 compatibility is more important than IE6.