IE6/7 und Navigation in zwei Blöcken

[dieselross]

Hallo Gemeinde,

folgende Navigationsstruktur reagiert im IE6/7 seltsam:

<div id="header">  
	<ul id="headnav"> <!-- Hauptnavigation linker Block -->  
		<li id="home">  
			<a href="#" class="home"> <!-- Navigationsbutton -->  
				<span class="beschriftung">Home</span> <!-- Beschriftung abgesetzt für Positionierung -->  
			</a> <!-- Ende Navigationsbutton -->  
		</li>  
		<li id="kontakt">  
			<a href="#" class="kontakt">  
				<span class="beschriftung">Kontakt</span>  
			</a>  
		</li>  
		...  
	</ul> <!-- Ende Hauptnavigation linker Block -->  
	<ul id="toolbar"> <!-- Hauptnavigation rechter Block -->  
		<li id="englisch">  
			<a href="#" class="englisch">  
				<span class="beschriftung">Englisch</span>  
			</a>  
		</li>  
		<li id="deutsch">  
			<a href="#" class="deutsch">  
				<span class="beschriftung">Deutsch</span>  
			</a>  
		</li>  
		...  
	</ul> <!-- Ende Hauptnavigation rechter Block -->  
</div>

/* Positionierung der Blöcke: */  
#headnav, #toolbar {  
	position: absolute;  
	display: block;  
	height: 80px;  
	padding-top: 5px;  
}  
#toolbar {  
	right: 0px;  
}  
/* Definition der einzelnen Buttons: */  
#headnav li {  
	position: relative;  
	display: block;  
	width: 70px;  
	height: 70px;  
	float: left;  
	margin-right: 5px;  
}  
#toolbar li {  
	position: relative;  
	display: block;  
	width: 70px;  
	height: 70px;  
	float: right;  
	margin-left: 5px;  
}  
#headnav li a {  
	width: 60px;  
	height: 60px;  
	display: block;  
	padding: 5px;  
	background-repeat: no-repeat;  
	background-position: 0px 0px;  
}  
#toolbar li a {  
	width: 60px;  
	height: 60px;  
	display: block;  
	padding: 5px;  
	background-repeat: no-repeat;  
	background-position: -70px 0px;  
}  
/* Positionierung der Beschriftung: */  
#headnav li a .beschriftung {  
	display: block;  
	position: absolute;  
	right: 22px;  
	bottom: 22px;  
	color: #fff;  
	font-size: 7px;  
	font-weight: bold;  
	text-align: right;  
}  
#toolbar li a .beschriftung{  
	display: block;  
	position: absolute;  
	right: 6px;  
	bottom: 22px;  
	color: #fff;  
	font-size: 7px;  
	font-weight: bold;  
	text-align: right;  
}  
/* Definition des Rollover-Verhaltens: */  
#headnav li a:hover {  
	background-position: -70px 0px;  
}  
#toolbar li a:hover {  
	background-position: 0px 0px;  
}  
#headnav li a:hover .beschriftung,  
#toolbar li a:hover .beschriftung {  
	display: inline;  
	color: #fff;  
	font-size: 10px;  
	font-weight: bold;  
	position: absolute;  
	right: 6px;  
	bottom: 6px;  
}

Während der rechte Block reagiert wie erwartet (der Navigationsbutton zeigt den entsprechenden Rollover-Status beim Erreichen der Grenzen des Buttons) reagiert der linke Block nur, wenn der Pointer auf der Beschriftung ist. Hat jemand eine Idee, wo der Fehler liegt? (Die Definitionen für die background-images habe ich weggekürzt weil ich denke, die tun hier nichts zur Sache)

Gruß
dieselross