(CSS) Abstand zwischen Elementen in horizontaler Navigation entfernen

Hallo zusammen,

ich habe eine horizontale Navigation so wie hier gebastelt (horizontale Navigation), nur halt mit Bildern für den mouseover Effekt.

Wie bekommt man den Abstand zwischen den Elementen Weg. Hab schon alles Mögliche ausprobiert aber diese unschöne Lücke geht nicht Weg.

hier der quelltext:

css:

#navigationinhalt {}
.navihaupt {list-style-type:none;vertical-align:top;margin:0;padding:0;background-image:url(bilder/navileiste.gif);background-repeat:no-repeat;background-position:center top;}
.navipunkt {list-style:none;display:inline;margin:0;padding:0;}


html:

<div id="navigationinhalt">
    <ul class="navihaupt">
      <li class="navipunkt"><a href="seite1.html"><img src="bilder/link1.gif" width="110" height="37" border="0" alt="seite1"></a></li>
      <li class="navipunkt"><a href="seite2.html"><img src="bilder/link2.gif" width="139" height="37" border="0" alt="seite2"></a></li>
      <li class="navipunkt"><a href="seite3.html"><img src="bilder/link3.gif" width="144" height="37" border="0" alt="seite3"></a></li>
      <li class="navipunkt"><a href="seite4.html"><img src="bilder/link4.gif" width="163" height="37" border="0" alt="seite4"></a></li>
      <li class="navipunkt"><a href="seite5.html"><img src="bilder/link5.gif" width="140" height="37" border="0" alt="seite5"></a></li>
    </ul>