Script behaves differently in IE... could it be a CSS thing?

JavaScript
1

Hi there,

Not sure exactly where this post should go, but I’ll start here and see how I get on.

I have a test page up here:
soulfirefestival.com/soulfirefestival/new_site/

The background image is actually made up of two images. The <html> has a background image (bg.jpg) which is about 3000px long. The <body> has an image which completes the main background image. If the height of the <html> and <body> is smaller than the height of the window, I need to force the <body> image to the bottom of the screen, otherwise I need the height to be automatically assigned.

Here’s my jQuery:


function footerPlace(){
	$("html, body").css({height:"auto"});
	
	var winHeight = $(window).height();
	var htmlHeight = $("html").height();
	
	if(winHeight > htmlHeight) $("html, body").css({height:"100%"});
}

$(window).load(function(){
	footerPlace();
	$(window).resize(function(){
		footerPlace();
	});
});

This has the desired effect on Opera, Chrome, Safari and FF. But when it comes to IE, things go wrong. In fact, at first I thought the script wasn’t loading. However, now I realise that its running fine, but assigning the <body> and <html> tags heights of 100%, doesn’t actually seem to be changing their sizes.

Is this a CSS issue. Or am I approaching this whole thing the wrong way round?

Best,
Mike