HTML horizontales Menü mit Bildern

Ich will ein simples horizontales menü erstellen, dass 5 bilder (schaltflächen) darstellt.
wenn ich mit der maus über diese buttons, soll sich das bild (die schlatfläche) aufleuchten. dazu verwende ich einfach ein 2. bild, dass bei einem mouse over ersetzt wird.

mein html code sieht also wie folgt aus:
<div id="buttons">
<ul>
<li><a id="index" href="index.html"></a></li>
<li><a id="seite2" href="seite2.html"></a></li>
<li><a id="seite3" href="seite3.html"></a></li>
<li><a id="seite4" href="seite4.html"></a></li>
</ul>

die css:
#buttons ul {
margin: 0; padding: 0;
list-style-type: none;
list-style-image: none;
}
#buttons li {display: inline; }

a# index{
background-image:url(startseite.png);
width:100px;
height:30px;
}
a:hover# index {
background-image:url(startseite2.png);
}

....



Der IE 8.0 zeigt alles korrekt an, der Firefox nichts.
Ich hab auch schon versucht nichtsichtbare Zeichen als Schaltflächen anzufzeigen, funktioniert auch nicht.
Wenn ich die Images gleich im Button <a href=... > <img .. </a> anzeige, entstehen zwischen den einzelnen buttons kleine lücken, auch ein mouse over effekt wäre dann nicht möglich?

finde auch leider dazu nichts über google, wer kann mir helfen?

 

Ich will ein simples horizontales menü erstellen, dass 5 bilder (schaltflächen) darstellt.
wenn ich mit der maus über diese buttons, soll sich das bild (die schlatfläche) aufleuchten. dazu verwende ich einfach ein 2. bild, dass bei einem mouse over ersetzt wird.

mein html code sieht also wie folgt aus:
<div id="buttons">
<ul>
<li><a id="index" href="index.html"></a></li>
<li><a id="seite2" href="seite2.html"></a></li>
<li><a id="seite3" href="seite3.html"></a></li>
<li><a id="seite4" href="seite4.html"></a></li>
</ul>
</div>

die css:
#buttons ul {
margin: 0; padding: 0;
list-style-type: none;
list-style-image: none;
}
#buttons li {display: inline; }

a# index{
background-image:url(startseite.png);
width:100px;
height:30px;
}
a:hover# index {
background-image:url(startseite2.png);
}

....



Der IE 8.0 zeigt alles korrekt an, der Firefox nichts.
Ich hab auch schon versucht nichtsichtbare Zeichen als Schaltflächen anzufzeigen, funktioniert auch nicht.
Wenn ich die Images gleich im Button <a href=... > <img .. </a> anzeige, entstehen zwischen den einzelnen buttons kleine lücken, auch ein mouse over effekt wäre dann nicht möglich?

finde auch leider dazu nichts über google, wer kann mir helfen?

 

Ich würde nicht mit "ID" sondern mit "CLASS" arbeiten, dann sollten auch ältere Browser das verstehen. Zudem scheint mir das # am Ende einer ID in der CSS-Datei nicht korrekt.