zusätzliches <img> in <li>-Navigation

[Daniel N.]

Hallo,

ich möchte in meiner "klassischen" Listen-Navigation, die vertikal aufgebaut sein soll, zusätzlich ein absolut positioniertes Image hinzufügen, da ich dieses dynamisch (mouseover) einblenden/ausblenden kann. (Kein "einfaches" hover, sondern eine Anmimation).

Leider machen schon wieder die IEs Probleme, im IE7 ist der Link - offenstichglich wegen des Bildes - nicht mehr auf der gesamten Breite klickbar. Im IE6 erscheint zusätlich unter dem Eintrag ein leerer Balken, so ähnlich wie sich das mit dem Whitespace-bug geäußert hat.

Habt ihr Ideen?

Folgendes habe ich versucht:

Das Markup

<div id="navcontainer">  
<ul id="navlist">  
  <li>  
    <a href="#">Item one</a>  
    <img src='navigation-background-active.jpg' alt='bg-bild' />  
  </li>  
  <li><a href="#">Item two</a></li>  
  <li><a href="#">Item three</a></li>  
  <li><a href="#">Item four</a></li>  
</ul>  
</div>

Das zugehörige CSS:

  
#navcontainer {  
	float: left;  
	background-color: #2175bc;  
}  
  
#navcontainer ul {  
	list-style: none;  
	margin: 0px;  
	padding: 0px;  
	border: none;  
	position: relative;  
}  
  
#navcontainer li {  
	margin: 0;  
	padding: 0;  
	border: none;  
	position: relative;  
}  
  
#navcontainer li a {  
	display: block;  
	padding: 5px;  
	color: #fff;  
	text-decoration: none;  
	width: 200px;  
	position: relative;  
	top: 0;  
	left: 0;  
	z-index: 1;  
}  
  
#navcontainer li img {  
	margin: 0;  
	padding: 0;  
	border: none;  
	position: absolute;  
	top: 0;  
	left: 0px;  
	z-index: 0;  
	width: 210px;  
	height: 30px;  
}  
  
#navcontainer li a:hover {  
	background-color: #2586d7;  
}

Viele Grüße
Daniel