IE7 z index bug, normal solution doesn't work

HTML & CSS
1

I have 5 “experts” (just a square div) that are to be overlapped and layered over each other. On mouse over, that card should come to the front and change a few other CSS properties. Upon mouse out, it should return to its original state.

My code works fine in FF, Chrome, IE8 and even Quirks mode (now thats surprising!) but fails in IE7. I’ve done a bunch of reading about the infamous “ie7 z index bug” but haven’t found anything that applies to my own situation. All the readings I found have been for navigation style elements, but that doesn’t really apply to me.

I believe it has something to do with hover state in IE, but besides that I’m not sure.

I did find out that if I use jquery to do the hover state, it works fine in IE7! But in attempt to understand IE and become a better developer, I’d like to find a CSS only solution to this. I’ve included the jquery (commented out) to make it work, for reference (also don’t forget to comment out the CSS hover state labeled in the comment, or else funny things will happen).


<html>
<head>
<style type="text/css">
	#experts .inner {position: relative; z-index:1;}

	.expert {width: 245px; height: 333px; position: absolute; }
	.expert a {width: 245px; height: 333px; display: block; text-indent: -9999px; }

	#expert1 {left: 0; top: 0; z-index: 3;}
	#expert1 a {background-color: #FC8B8B;}
	#expert1 a:hover {background-color: #ff0000;}

	#expert2 {left: 160px; top: 0; z-index: 4;}
	#expert2 a{background-color: #E57DFA;}
	#expert2 a:hover {background-color: #D200FC;}

	#expert3 {left: 320px; top: 0; z-index: 5; }
	#expert3 a{background-color: #7A83FF;}
	#expert3 a:hover {background-color: #0011FF;}

	#expert4 {left: 500px; top: 0; z-index: 6; }
	#expert4 a{background-color: #8EFF80;}
	#expert4 a:hover{background-color: #1DFA00;}

	#expert5 {left: 670px; top: 0; z-index: 7; }
	#expert5 a{background-color: #FAC882;}
	#expert5 a:hover{background-color: #FF9500;}

	#expert1 ,#expert3 ,#expert5 {top: 50px;}
	/** COMMENT THIS SECTION OUT WHEN USING JQUERY **/
	#expert1:hover,
	#expert2:hover,
	#expert3:hover,
	#expert4:hover,
	#expert5:hover {z-index: 10;}
	
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<div id="experts">
	<div class="inner">
		<div id="expert1" class="expert"><a href="#">Expert 1</a></div>
		<div id="expert2" class="expert"><a href="#">Expert 2</a></div>
		<div id="expert3" class="expert"><a href="#">Expert 3</a></div>
		<div id="expert4" class="expert"><a href="#">Expert 4</a></div>
		<div id="expert5" class="expert"><a href="#">Expert 5</a></div>
	</div>
</div>

<script>
/*
	(function ($) {
		var old = 0;
		$('.expert').hover(
		function(){
			old = $(this).css('z-index');
			$(this).css('z-index', 10);
			console.log($(this).css('z-index'));
		},
		function(){
			$(this).css('z-index', old)	;
			console.log($(this).css('z-index'));
		});
	
	} (jQuery));
*/	
</script>
</body>
</html>

Any help or guidance is greatly appreciated.

Feel free to ask questions too!!

Thanks in advance!!

2

All I can think of is that you don’t have a strict doctype declaration. In that case IE7 will render in quirksmode and only apply :hover to anchor <a> elements. Just like good old IE6 did :slight_smile:

3

Ahh I came upon the solution this morning. Unfortunately the original code above is not my actual code, but a simplified version to protect private info. In my actual I am not using background color, but a background image sprite w shifting background positions. The solution following is a working solution using background shifting (as the project required).

The answer to the question was a simple refactoring of my mark up.

The new working version (now using a background image instead of background colors):

<html>
<head>
<style type="text/css">
	#expertsContainer {position: relative; z-index:1;}
	.expert {width: 245px; height: 333px; position: absolute; display: block; text-indent: -9999px;  background: transparent url('experts.png') no-repeat top left;}

	#expert1 {left: 0; top: 0; z-index: 3; background-position: 0 0;}
	#expert1:hover {background-position: 0 -346px;}

	#expert2 {left: 160px; top: 0; z-index: 4; background-position: -247px 0;}
	#expert2:hover {background-position: -247px -346px;}

	#expert3 {left: 320px; top: 0; z-index: 5; background-position: -495px 0;}
	#expert3:hover {background-position: -495px -346px;}

	#expert4 {left: 500px; top: 0; z-index: 6; background-position: -743px 0;}
	#expert4:hover{background-position: -743px -346px;}

	#expert5 {left: 670px; top: 0; z-index: 7; background-position: -988px 0;}
	#expert5:hover{background-position: -988px -346px;}

	#expert1 ,#expert3 ,#expert5 {top: 50px;}
	
	#expert1:hover,
	#expert2:hover,
	#expert3:hover,
	#expert4:hover,
	#expert5:hover {z-index: 10;}

</style>
</head>
<body>
<div id="expertsContainer">
	<a href="#" id="expert1" class="expert">Expert 1</a>
	<a href="#" id="expert2" class="expert">Expert 2</a>
	<a href="#" id="expert3" class="expert">Expert 3</a>
	<a href="#" id="expert4" class="expert">Expert 4</a>
	<a href="#" id="expert5" class="expert">Expert 5</a>
</div>
</body>
</html>

Removing the surround div’s did the trick! Again the css needed to be cleaned up a little bit to have the styles apply to the anchor tags instead of the div’s but it was a quick and simple fix.

Hope this helps someone else down the line!