Images in Liste nebeneinander ohne Abstand auflisten

[Shakron]

Es gibt ja diverse gute Ideen wie man mit CSS-formatierten Listen (<ul> ) horizontale Navigationen hinbekommt. Darauf basierend wollte ich das auch mal versuchen, und zwar mit Bildern, die ich so nebeneinander platziere (nahtlos, ohne Abstand).

Doch leider wird mir trotzdem zwischen den Bildern jeweils ein Abstand von ein paar Pixeln fabriziert. Hat jemand eine Idee weshalb das so ist bzw. was ich dagegen unternehmen kann?

CSS:
---------------------------------------------
div#topnav{
        margin: 0px;
        padding: 0px;
        height: 33px;
        width: 749px;
}
div#topnav ul, div#topnav li{
        display: inline;
        list-style: none;
        margin: 0px;
        padding: 0px;
        border: none;
        text-decoration: none;
}
---------------------------------------------

Und hier der HTML-Code:
---------------------------------------------
<div id="topnav">
<ul>
  <li><img src="img/bild1.gif" height="33" width="107" alt="" title=""></li>
  <li><img src="img/bild2.gif" height="33" width="107" alt="" title=""></li>
  <li><img src="img/bild3.gif" height="33" width="107" alt="" title=""></li>
  <li><img src="img/bild4.gif" height="33" width="107" alt="" title=""></li>
  <li><img src="img/bild5.gif" height="33" width="107" alt="" title=""></li>
  <li><img src="img/bild6.gif" height="33" width="107" alt="" title=""></li>
  <li><img src="img/bild7.gif" height="33" width="107" alt="" title=""></li>
</ul>
</div>

---------------------------------------------