Mouseover JQuery zIndex change not working in IE

vouzamo · #1 02-17-2010, 07:27 AM

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>

Gozzy82 · #2 02-17-2010, 09:05 AM

i played around with it a bit, it seems that the z-index of #navigation is blocking the image from beeing displayed.

i added .parent().css('zIndex', '3'); to the first tab to illustrate it should work when you work around/fix the navigation z-index problem.

http://www.webdevout.net/test?02P

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>
<base href="http://www.vouzamo.co.uk/tyro/" />
		<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;
                                z-index:2;
			}
			#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;
				height: 600px;
                                z-index:1;
				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').parent().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>

so i know this is not an solution but it is a identification of the problem..

Thread Tools
Show Printable Version Email this Page
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread:

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)