✔ Problem mit Hoovereffekt im IE

[08154711]

Hi,
Habe folgende Problem - kleine Linkliste / 2 Reihem a' 5 Button. Beim Überfahren des Links soll das Bild sowie eine Kurzbeschreibung eingeblendet werden. Das klappt nur im FF. im IE liegen die Links auf den Bildern. Hier mal der Code

#box a {
	color:#ffffff;
	text-align:center;
	background: #930;
	font: 12px verdana, sans-serif;
	text-decoration:none;
	display:block;
	width:110px;
	border:1px solid #000;
	float:left;
	position:relative;
	padding: 10px;
	margin-left: 25px;
}

/*#box a:hover {
	color:black;
	background: transparent;
}*/

#box a span {
	display:none;
}

#box a:hover span {
	padding:0 18px 20px 0;
	position:absolute;
	left:0px;
	top:0px;
	display:block;
	width:110px;
	color:black;
	background:#fff;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size:10px;
	border:1px solid #000;
	margin-top: 40px;
	z-index:1000;
}
/*[if IE]>
 	#
  <![endif] */


.boxposition {
	margin: 100px auto;
	margin-left: 64px;
}

.img {
	position:absolute;
	margin-left:45px;
	margin-top:-42px;
}

body {
	background-color: #69F;
}

<div class="boxposition">
	<div id="box">
<div><a href="#" target="_blank">Link1<span>Hier ist ein Bild<img class="img" src="red.jpg"/></span></a></div>
<div><a href="#" target="_blank">Link2<span>Hier kein Bild</span></a></div>
<div><a href="#" target="_blank">Link3<span>Hier ist ein Bild<img class="img" src="green.jpg"/></span></a></div>
<div><a href="#" target="_blank">Link4<span>Hier ist ein Bild<img class="img" src="yellow.jpg"/></span></a></div>
<div><a href="#" target="_blank">Link5<span>Hier kein Bild</span></a></div><br />
<br />
<br />
<br />
<div><a href="#" target="_blank">Link6<span>Hier ist ein Bild<img class="img" src="green.jpg"/></span></a></div>
<div><a href="#" target="_blank">Link8<span>Hier ist ein Bild<img class="img" src="yellow.jpg"/></span></a></div>
<div><a href="#" target="_blank">Link7<span>Hier kein Bild</span></a></div>
<div><a href="#" target="_blank">Link9<span>Hier ist ein Bild<img class="img" src="blue.jpg"/></span></a></div>
<div><a href="#" target="_blank">Link10<span>Hier kein Bild</span></a></div>
<br />

</div></div>

Danke

 

[Maik]

Hi,

hier wirst du den einzelnen Links eine gesonderte Schichtposition zuordnen müssen, damit sich das Bild über das benachbarte Element legt, und nicht darunter verschwindet.

mfg Maik

 

[08154711]

Danke für die Antwort, jetzt klappts.