I have made a layout which includes some coloured tabs which make ajax calls to get content. These tabs are partially hidden and onmouseover the tab should move to the front. this works perfectly in Firefox, Chrome, Opera, and Safari, but not in IE. I get no javascript errors and the page validates on W3C Validator without error.

The live page can be viewed here: http://www.vouzamo.co.uk/tyro

Code:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
		<title>We Are TYRO!</title>
		<style type="text/css">
			body
			{
				background: url('images/background.png') repeat center center fixed;
			}
			#logo
			{
				position: absolute;
				width: 200px;
				height: 108px;
				top: 10px;
				left: 50%;
				margin-left: -450px;
			}
			#navigation
			{
				position: absolute;
				width: 900px;
				top: 80px;
				left: 50%;
				margin-left: -450px;
			}
			#navigation img
			{
				position: absolute;
				z-index: 1;
				opacity: 50;
				cursor: pointer;
			}
			#outer
			{
				position: absolute;
				width: 900px;
				top: 125px;
				left: 50%;
				margin-left: -450px;
				background: #eee9d2 url('images/paper1.png') no-repeat top left;
				z-index: 2;
			}
			#inner
			{
				position: relative;
				width: 900px;
				min-height: 600px;
				background: url('images/paper2.png') no-repeat bottom left;
			}
		</style>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
		<script type="text/javascript">
			var current_page = 0;
			function ajax(url,element)
			{
				$.get(url,function(data){
					$('#'+element).html(data);
				});
			}
		</script>
	</head>
	<body>
		<div id="logo">
			<img src="images/logo.png" alt="Tyro Logo">
		</div>
		<div id="navigation">
			<img style="margin-left: 440px;" src="images/link1.png" alt="The Band Tab" onmouseover="$(this).css('zIndex','3');" onmouseout="if(current_page != 1){$(this).css('zIndex','1');}" onclick="current_page = 1; $('#navigation img').css('zIndex','1'); $(this).css('zIndex','3'); ajax('the_band.asp','inner');">
			<img style="margin-left: 520px;" src="images/link2.png" alt="Music Tab" onmouseover="$(this).css('zIndex','3');" onmouseout="if(current_page != 2){$(this).css('zIndex','1');}" onclick="current_page = 2; $('#navigation img').css('zIndex','1'); $(this).css('zIndex','3'); ajax('music.asp','inner');">
			<img style="margin-left: 610px;" src="images/link3.png" alt="Photos Tab" onmouseover="$(this).css('zIndex','3');" onmouseout="if(current_page != 3){$(this).css('zIndex','1');}" onclick="current_page = 3; $('#navigation img').css('zIndex','1'); $(this).css('zIndex','3'); ajax('photos.asp','inner');">
			<img style="margin-left: 690px;" src="images/link4.png" alt="Video Tab" onmouseover="$(this).css('zIndex','3');" onmouseout="if(current_page != 4){$(this).css('zIndex','1');}" onclick="current_page = 4; $('#navigation img').css('zIndex','1'); $(this).css('zIndex','3'); ajax('video.asp','inner');">
			<img style="margin-left: 780px;" src="images/link5.png" alt="Events Tab" onmouseover="$(this).css('zIndex','3');" onmouseout="if(current_page != 5){$(this).css('zIndex','1');}" onclick="current_page = 5; $('#navigation img').css('zIndex','1'); $(this).css('zIndex','3'); ajax('events.asp','inner');">
		</div>
		<div id="outer">
			<div id="inner">
				content gets pulled into here
			</div>
		</div>
	</body>
</html>