Vertikale Navigation (Liste) mit Textgrafiken

[cdash]

Hallo,

ich habe eine vertikale Navigation bei der ich Textgrafiken verwende:

<div id="main_left">
  <!-- Hauptnavigation -->
   <ul>
   <li><a href="company.php"><img src="img/img_de/company.gif" alt="Firmenprofil"/></a></li>
   <li><a href="shop.php"><img src="img/img_de/shop.gif" alt="Shop"/></a></li>
   <li><a href="test.php"><img src="img/img_de/test.gif" alt="Test" border="0"/></a></li>
   <li><a href="tip.php"><img src="img/img_de/tip.gif" alt="Tipps"/></a></li>
   <li><a href="reifensuche.php"><img src="img/img_de/tsearch.gif" alt="Reifensuche"/></a></li>
   <!--<li><a href="game.php"><img src="img/img_de/game.gif" alt="Games"/></a></li>
    <li><a href="merchandising.php"><img src="img/img_de/merchandising.gif" alt="Merchandising"/></a></li>
    <li><a href="win.php"><img src="img/img_de/win.gif" alt="Gewinnspiel"/></a></li> -->
   </ul>
  </div>

Die dazugehörigen Styles sehen folgendermaßen aus:

/* Hauptnavigation */
#main_left ul {
 margin-top: 180px;
 margin-left: 0px;
 padding-left: 0px;
}

#main_left li {
 list-style-type: none;

}

#main_left a {
 background-image: url(img/navi_bg.gif);
 display: block;
 height: 25px;
 margin-top: 0px;
}

#main_left a:hover {
 background-image: url(img/navi_bg.gif);
 background-position: 0px -25px;
}

Das ist nun nicht so super toll bei einer Navigation mit Grafiken zu arbeiten, dass lässt sich in dem Fall aber nicht anders lösen.

Mein Problem ist: Im Internet Explorer gibt es einen Abstand von 1 bis 2 Pixeln zwischen den Grafiken und ich bekomme den einfach nicht weg. Hat jemand eine Idee?

Ich habe das ganze zum besseren Verständniss auch noch mal hochgeladen.

Vielen Dank