Abstand zwischen Grafiken in Liste (inline) definieren

[Benedikt Ernst]

Hallo!

Ich arbeite gerade an einer Seite, in der die Hauptnavigation horizontal aufgebaut ist. Die Formatierung der Navigation läuft über CSS per <ul> <li> etc., die Navigationspunkte sind Grafiken (kein Text!). Leider habe ich zwischen den Grafiken immer noch 3 oder 4 pixel Abstand. Wie bekomme ich die bündig aneinander gesetzt?

Der Code sieht momentan so aus:

CSS:
#nav {
 margin: 0px;
 padding: 0px;
 float:right;
}

ul#nav {
 margin: 0px;
 padding: 0px;
}

#nav li {
 display: inline;
 list-style-type: none;
 letter-spacing:0px;
 margin: 0px;
 padding: 0px;
}

HTML:
<ul id="nav">
<li><a href="#" ><img src="images/button1.gif"></a></li>
<li><a href="#" ><img src="images/button2.gif"></a></li>
<li><a href="#" ><img src="images/button3.gif"></a></li>
</ul>