unerwünschte Abstände in <ul> Liste

[Greg]

Hallo,
ich habe folgendes Problem bei einer unsortierten Liste, welche ich als Navigation nutzen möchte. Dabei ist zu beachten, dass die Links als Bilder dargestellt werden. Diese sind vom Designer allerdings so angelegt worden, dass sie notwendiger weise einen Abstand von 0 Pixeln haben müssen, da ansonsten unschöne Freistellen entstehen. Ich hoffe jemand kann mir sagen, was ich falsch mache oder was ich vergessen habe oder wo mein Fehler liegt. Anbei noch alle nötigen HTML und CSS Informationen. Danke schonmal im Vorraus!
Mit freundlichen Grüßen,
Greg

HTML Ausschnitt Navigation:

  
<ul id="navigation">  
  <li>  
    <a href="#">  
      <span class="invis">News</span>  
        <img id="btn-en_news"  
              src="images/btn-en_news.png"  
              alt="News"  
              title=""  
              onmouseout="hoverimage(this.id);"  
              onmouseover="hoverimage(this.id);" />  
    </a>  
  </li>  
  ... usw  
</ul>				  

CSS Ausschnitt:

  
#navigation  
{  
	position:absolute;  
	margin:0;  
	padding:0;  
	list-style-type:none;  
	top:279px;  
	left:0;  
}  
  
#navigation li  
{  
	margin:0;  
	padding:0;  
}  
  
.invis  
{  
	display:none;  
}  

Und leider kommt das bei raus: