-- part of html page:
                <div id="mainbackground">
			<img src="images/home/background.png" id="mainbackgroundimage"/>
			
			
				<!-- 6 divs for hover/clickable areas -->
				<div id="infojarne">
					<img src="images/home/infojarne.gif" id="inforjaneImg">
				</div>
				<div id="paintings">
					<img src="images/home/paintings.gif" id="paintingsImg">	
				</div>
				<div id="etc">
					<img src="images/home/etc.gif" id="etcImg">
				</div>
				<div id="projects">
					<img src="images/home/projects.gif" id="projectsImg">
				</div>
				<div id="digitalart">
					<img src="images/home/digitalart.gif" id="digitalartImg">
				</div>
				<div id="drawings">
					<img src="images/home/drawings.gif" id="drawingsImg">
				</div>
				
		</div>	

--Javascript file to set positioning:

// because ie does not support console if not in debug...
if (!window.console) console = {log: function() {},info: function(){}};

$("document").ready(function(){

	function ImageDimensions (width, height, x, y, id){
		this.width = width;
		this.height = height;
		this.x = x; 
		this.y = y;
		
		if(id){
			var $div = $(id);
			$div.css("z-index", "1");
			if(id == "#etc"){
				$div.css("right", "0px");
				$div.css("bottom", "0px");	
			}else{
				$div.css("left", this.x +"px");
				$div.css("top", this.y +"px");
			}
			
			$div.css("width", this.width +"px");
			$div.css("height", this.height +"px");
			$div.hover(
				function(event){
					$div.find("img").show();
				},
				function(event){
					$div.find("img").hide();
				}
			);
			$div.click(function(){
				var location;
				if($div.attr("id") == "infojarne"){
					$(window.location).attr('href', 'infojarne.html');
				}if($div.attr("id") == "digitalart"){
					$(window.location).attr('href', 'digitalart.html');
				}else{
					console.info("unknown id : " + id);
				}
			});
			var $imgObj = $(id+ " img");
			$imgObj.hide();
		}
	};
	
	var background = new ImageDimensions(836, 638);
	// TODO on resize recalc this + reposition
	var windowWidth = $(window).width();
	console.info("windowWidth:" + windowWidth);
	var leftMargin = (windowWidth - background.width) /2;
	console.info("left margin:" + leftMargin);
	
	$("#mainbackground").css("left",leftMargin+"px");
	$("#mainbackground").css("z-index","0");

	
	var infojarne = new ImageDimensions(413, 200, 149, 0, "#infojarne");
	var drawings = new ImageDimensions(272, 138, 0 ,200, "#drawings");
	var digital = new ImageDimensions(276, 172, 0, 338, "#digitalart");
	var projects = new ImageDimensions(311, 128 ,276, 509, "#projects");
	var etc = new ImageDimensions(249, 299, 587, 340, "#etc");
	var paintings = new ImageDimensions(290, 138, 546, 200, "#paintings");
	
});


DESCRIPTION OF CODE (WHAT AM I TRYING TO ACHIVE):
*. set the encapsulating div "mainbackground" in the center of the screen.(position relative) + set the width and height of the div. This equals the dimensions of the background image "#mainbackgroundimage"

*. the containing divs should react on hovers, and show the image that they hide when the div is hovered.
Therefore i have set the divs width and height and position so the hover can happen, and hidden the image contained in that div.

PROBLEM:
For some reason this does not work on IE9. It works however on FireFox and Chrome.
I have tried some stuff with the z-index but at no avail ...
Can anybody shed some light on this issue