Menü mit HTML/CSS Text- und Grafikbutton

Hallo Gemeinde,

Ich habe ein Menü gebastelt, das neben Text- auch einen Grafikbutton enthalten soll.

HTML-Teil:
<ul id="navi">
<li><a href="index.html">Home</a></li>
<li><a href="ueber_uns.html" id="akt">Über uns</a></li>
<li><a href="kontakt.html">Kontakt</a></li>
<li><a href="guestbook.html">Gästebuch</a></li>
<li><a href="guide.html"> <img src="guide.gif" alt="" border="0"> </a></li>
</ul>

CSS-Teil:

#navi {
margin: 0;
padding: 0;
width: 10em;
}

#navi ul, #navi li {
margin: 0.625em 0px;
list-style-type: none;
font-weight: bold;
display: block;
height: 1.88em;
background: url(Menubutton.gif) no-repeat;
}

#navi li a {
padding-left: 0.625em;
padding-right: 3.125em;
padding-top: 0.313em;
display: block;
text-decoration: none;
width: 100.1%;
background: url(Menubutton.gif) no-repeat;
}

#navi a:link, #navi a:visited {
color: white;
background: url(Menubutton.gif) no-repeat;
}

#navi #akt {
color: yellow;
background: url(Menubutton.gif) no-repeat;
}

#navi a:hover {
color: yellow;
background: url(Menubutton.gif) no-repeat;
}

Problem: Wie verhindere ich, daß im Grafik-Button zusätzlich zur Grafik die Hintergrund-Grafik erscheint?

Hallo, Problem ist, die Seite ist so noch nicht online, stattdessen ist da eine Uralt-Fassung, in der das Menü aus Tabelle besteht -
zum Abstand der einzelnen Menüpunkte auch noch leere Zeilen in der Tabelle.

Ich habe jetzt für die Listeneinträge im Menü zwei Klassen angelegt (Text und Grafik) und den css Teil überarbeitet,
so daß in der Klasse Text die Menübuttongrafik als Hintergrund und in der Klasse Grafik die Grafik zusätzlich als Hintergrund erscheint.

css-Teil:

#navi {
margin: 0;
padding: 0;
width: 10em;
}

#navi ul, #navi li {
margin: 0.625em 0px;
list-style-type: none;
font-weight: bold;
display: block;
height: 1.88em;
}

#navi li a {
padding-left: 0.625em;
padding-right: 3.125em;
padding-top: 0.313em;
display: block;
text-decoration: none;
width: 100.1%;
}
#navi li.text {
background: url(Menubutton.gif) no-repeat;
}
#navi li.grafik {
background: url(guide.gif) no-repeat;
}
#navi a:link, #navi a:visited { color: white; }

#navi #akt {color: yellow; }

#navi a:hover {color: yellow; }

HTML-Teil:
<ul id="navi">
<li class="Text"><a href="index.html" >Home</a></li>
<li class="Text"><a href="Ueber_uns.html" id="akt" >Über uns</a></li>
<li class="Text"><a href="kontakt.html">Kontakt</a></li>
<li class="Text"><a href="guestbook.html">Gästebuch</a></li>
<li class="Grafik"><a href="guide.html"> <img src="guide.gif" alt="" border="0"> </a></li>
</ul>

Zumindest sieht es jetzt ok aus. Der Menübutton erscheint nur noch bei den Text-Buttons als Hintergrund. Beim Grafikbutton haben wir jetzt dieselbe Grafik sowohl im Button als auch als Hintergrund, besser wäre vermutlich dort einen transparenten Hintergrund in entsprechender Größe zu verwenden.

Die Grafik vom "guide" ist dem Titel eines Flyers nachempfunden, der seit geraumer Zeit existiert.
Die Grafik für die Textbuttons sollte so aussehen, wie auf dem aktuellen Flyer , im blauen Teil dann der entsprechende Text drin.
Da ich von Natur aus ein fauler Mensch bin, gibts den Button nur "textlos" als Hintergrund.