Darstellungsproblem im Menü

[rompers]

Hallo,

bin gerade dabei meine Seite mit einem neuen Style zu versehen
und mein Menü möchte nicht so wie ich das möchte.
Im Firefox geht es

aber im IE geht es nicht

hier noch mein code dazu
der CSS

.first a, .menue a, .ende a {
	font-family: arial, helvetica, tahoma ,verdana, sans-serif;
	font-size: 11pt;
	text-align: center;
	color: #EFEFEF;
	line-height: 66px;
	height: 67px;
	background-repeat: no-repeat;
	text-decoration: none;
}

.first a:hover, .menue a:hover, .ende a:hover {
	color: #AFAFAF;
}

.first a, .first a:visited , .first a:active {
	display: block;
	width: 156px;
	background-image: url(images/link01.jpg);
}

.first a:hover {
	background-image: url(images/link01b.jpg);
}

.menue a, .menue a:visited, .menue a:active {
	display: block;
	width: 150px;
	background-image: url(images/link_mitte.jpg);
	background-repeat: repeat-x;
}

.menue a:hover {
	background-image: url(images/link_mitteb.jpg);
}

.ende a, .ende a:visited, .ende a:active {
	display: block;
	width: 156px;
	background-image: url(images/link05.jpg);
}

.ende a:hover {
	background-image: url(images/link05b.jpg);
}

#navi ul li {
	float:left;
	list-style-type: none;
}

und der HTML

<div id="navi">
	<ul>
		<li class="first">
			<a href="index.html">Start</a>
		</li>
		<li class="menue">
			<img src="http://www.php-resource.de/forum/images/trenn.jpg" width="1" height="67" border="0" alt="" />
		</li>
		<li class="menue">
			<a href="gbook.html">G&auml;stebuch</a>
		</li>
		<li class="menue">
			<img src="http://www.php-resource.de/forum/images/trenn.jpg" width="1" height="67" border="0" alt="" />
		</li>
		<li class="menue">
			<a href="shop.html">Shop</a>
		</li>
		<li class="menue">
			<img src="http://www.php-resource.de/forum/images/trenn.jpg" width="1" height="67" border="0" alt="" />
		</li>
		<li class="menue">
			<a href="imprint.html">Impressum</a>
		</li>
		<li class="menue">
			<img src="http://www.php-resource.de/forum/images/trenn.jpg" width="1" height="67" border="0" alt="" />
		</li>
		<li class="ende">
			<a href="partner.html">Partner</a>
		</li>
	</ul>
</div>

bin für jede hilfe danbar

//Edit: fehler gefunden

[wahsaga]

Die Trenn-Bilder solltest du als Hintergrundbilder einsetzen - schliesslich sind sie kein Inhalt, sondern nur Verzierung.

Sie als einzelne Listenpunkte zu realisieren, ist hochgradig unsinnig. Betrachte das ganze mal ohne CSS, oder stell dir vor, wie es sich mit einem Screenreader anhört.