1 reply [Last post]
Bowlesinho
Bowlesinho's picture
Offline
newbie
Last seen: 12 years 4 weeks ago
Joined: 2010-11-08
Posts: 1
Points: 2

I'm trying to create a model whereby a user can hover their mouse over 7 different steps and below the model a further description of the stage of the model is shown up. I have the following code and it works in ie7, ie8, ff, safari, opera and chrome but I cannot get anything to display in ie6.

I'm sure this is a common ie bug of some sort but I can't figure it out so any help will be massively helpful.

Css code

div#ourapproach1 {
		position:absolute;
		top: 200px;
		left:0;
		width:128px;
		height:180px;
		background: #3c0378;
		z-index:1007;
 
		}
		div#ourapproach1 a span {
			display:none;
			}
		div#ourapproach1 a:hover span {
			display: block;
   			position: absolute; 
			top: 180px; left: 0px; 
			width: 841px;
   			padding: 20px 5px 20px 50px;
			margin: 0; 
			z-index: 1010;
   			color: #ffffff; 
			background: #3c0378;
   			}
	div#ourapproach2 {
		position:absolute;
		top: 200px;
		left:128px;
		width:128px;
		height:180px;
		background: #009900;
		z-index:1006;
		}
		div#ourapproach2 a span {
			display:none;
			}
		div#ourapproach2 a:hover span {
			display: block;
   			position: absolute; 
			top: 180px; left: -128px; 
			width: 841px;
   			padding: 20px 5px 20px 50px; 
			margin: 0; 
			z-index: 1010;
   			color: #ffffff; 
			background: #009900;
   			}
	div#ourapproach3 {
		position:absolute;
		top: 200px;
		left:256px;
		width:128px;
		height:180px;
		background: #09bd35;
		z-index:1005;
		}
		div#ourapproach3 a span {
			display:none;
			}
		div#ourapproach3 a:hover span {
			display: block;
   			position: absolute; 
			top: 180px; left: -256px; 
			width: 841px;
   			padding: 20px 5px 20px 50px;
			margin: 0; 
			z-index: 1010;
   			color: #ffffff; 
			background: #09bd35;
   			}
	div#ourapproach4 {
		position:absolute;
		top: 200px;
		left:384px;
		width:128px;
		height:180px;
		background: #05663c;
		z-index:1004;
		}
		div#ourapproach4 a span {
			display:none;
			}
		div#ourapproach4 a:hover span {
			display: block;
   			position: absolute; 
			top: 180px; left: -384px; 
			width: 841px;
   			padding: 20px 5px 20px 50px;
			margin: 0; 
			z-index: 1010;
   			color: #ffffff; 
			background: #05663c;
   			}
	div#ourapproach5 {
		position:absolute;
		top: 200px;
		left:512px;
		width:128px;
		height:180px;
		background: #01a0c7;
		z-index:1003;
 
		}
		div#ourapproach5 a span {
			display:none;
			}
		div#ourapproach5 a:hover span {
			display: block;
   			position: absolute; 
			top: 180px; left: -512px; 
			width: 841px;
   			padding: 20px 5px 20px 50px;
			margin: 0; 
			z-index: 1010;
   			color: #ffffff; 
			background: #01a0c7;
   			}
	div#ourapproach6 {
		position:absolute;
		top: 200px;
		left:640px;
		width:128px;
		height:180px;
		background: #006699;
		z-index:1002;
 
		}
		div#ourapproach6 a span {
			display:none;
			}
		div#ourapproach6 a:hover span {
			display: block;
   			position: absolute; 
			top: 180px; left: -640px; 
			width: 841px;
   			padding: 20px 5px 20px 50px;  
			margin: 0; 
			z-index: 1010;
   			color: #ffffff; 
			background: #006699;
   			}
	div#ourapproach7 {
		position:absolute;
		top: 200px;
		left:768px;
		width:128px;
		height:180px;
		background: #7f2679;
		z-index:1001;
		}
		div#ourapproach7 a span {
			display:none;
			}
		div#ourapproach7 a:hover span {
			display: block;
   			position: absolute; 
			top: 180px; left: -768px; 
			width: 841px;
   			padding: 20px 5px 20px 50px; 
			margin: 0; 
			z-index: 1010;
   			color: #ffffff; 
			background: #7f2679;
   			}	
 

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 8 years 8 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

You need to apply a style for

You need to apply a style for a:hover too. Doesn't matter what is, text-decoration or something else that doesn't affect the layout.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference