Abstand zwischen List-Elementen (Bilder)

[sirus]

Hallo,

ich bin gerade dabei ein Menü mit Mouseover-Effekt zu erstellen.
Nur leider hab ich da so hässliche Abstände zwischen den Elementen.
http://img683.imageshack.us/img683/873/menuez.jpg

Kann mir da jemand helfen?

     <div id="container1">
    </div>
    
    <div id="menu">
           <ul>
          <li><a id="home" href="index.html" onfocus="this.blur()">HOME</a></li>
          <li><img src="test/Bilder/MENU_02.gif"/></li>
          <li><img src="test/Bilder/MENU_03.gif"/></li>
          <li><a id="news" href="index.html" onfocus="this.blur()">NEWS</a></li>
          <li><img src="test/Bilder/MENU_05.gif"/></li>
          <li><img src="test/Bilder/MENU_06.gif"/></li>
          <li><a id="bilder" href="index.html" onfocus="this.blur()">BILDER</a></li>
          <li><img src="test/Bilder/MENU_08.gif"/></li>
          <li><img src="test/Bilder/MENU_09.gif"/></li>
          <li><a id="book" href="index.html" onfocus="this.blur()">GAESTEBUCH</a></li>
          <li><img src="test/Bilder/MENU_11.gif"/></li>
          <li><img src="test/Bilder/MENU_12.gif"/></li>    
          <li><a id="links" href="index.html" onfocus="this.blur()">LINKS</a></li>
          <li><img src="test/Bilder/MENU_14.gif"/></li>
          <li><img src="test/Bilder/MENU_15.gif"/> </li>   
          <li><a id="kontakt" href="index.html" onfocus="this.blur()">KONTAKT</a></li>
          <li><img src="test/Bilder/MENU_17.gif"/></li>
          <li><img src="test/Bilder/MENU_18.gif"/></li> 
        </ul>
        <div style="clear:both;"></div>
    </div>

CSS Code:

body {
    background-image:    url(images/background2.jpg);
    font-family:         Verdana, Arial, Helvetica, sans-serif;
}

* {
    margin:                0px;
    padding:            0px;
    } 

#container1 {
    left:                150px;
    height:                900px;
    width:                800px;
    background-color:    #1b1b1b;
    position:            absolute;
    z-index:            1;
    }
    
#menu {
    position:            absolute;
    top:                120px;
    left:                90px;
    z-index:            2;
    }

#menu ul {
    margin:                0px;
    padding:            0px;
    width:                166px;
    list-style:         none;
    list-style-type:     none;
    }
    
#menu ul li {
    margin:             0px;
    padding:             0px;
    float:                 left;
    }
    
    
a#home { 
    display:block;
    width:166px;
    height:38px;
    background: transparent url(test/Bilder/MENU_01.gif);
    text-indent:-9000%;}
    
a:hover#home { background: transparent url(test/active/MENU_01.gif); }

a#news {
    display:block;
    width:140px;
    height:35px;
    background: transparent url(test/Bilder/MENU_04.gif);
    text-indent:-9000%;}
    
a:hover#news { background: transparent url(test/active/MENU_04.gif); }
.
.
.