XHTMLforum - navigationsproblem

Hey,
ich habe ein kleines Problem mit meiner navigation. ich habe eine horizontale, welche mit bildern (links) ausgeschmückt ist. ich hab die alle positioniert, aber ich habe irgendwie einen 4px abstand zwischen den bildern, obwohl ich im ganzen dokument kein einziges mal margin/padding benutze, und diese auch immer auf 0 setze. man kann die bilder natürlich einzeln alle 4 px nach links verschieben, aber ich nehme eher an, dass ich irgendwas grundlegendes vergessen hab/nicht weiß.

Hier mein quellcode:

HTML-Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title></title>

<link rel="stylesheet" type="text/css" media="screen" href="css.css" />

</head>

<body text="#000000" background="bgpattern.png">



<div id="border">









        <div id="main">

                <div id="header">

                <img src="banner1.png"/>

                      <!-- links -->

                          <ul id="navigation">

                          <li><a href="index.html"><img src="buttons/home.png" onmouseover="javascript:this.src='buttons/home1.png'" onmouseout="javascript:this.src='buttons/home.png'" /></a>         </li>

                          <li><a href="gaming.html"><img src="buttons/gaming.png" onmouseover="javascript:this.src='buttons/gaming1.png'" onmouseout="javascript:this.src='buttons/gaming.png'" /></a>      </li>

                          <li><a href="news.html"><img src="buttons/news.png" onmouseover="javascript:this.src='buttons/news1.png'" onmouseout="javascript:this.src='buttons/news.png'" /></a>          </li>

                          <li><a href="team.html"><img src="buttons/team.png" onmouseover="javascript:this.src='buttons/team1.png'" onmouseout="javascript:this.src='buttons/team.png'" /></a>          </li>

                          <li><a href="about.html"><img src="buttons/about.png" onmouseover="javascript:this.src='buttons/about1.png'" onmouseout="javascript:this.src='buttons/about.png'" /></a>        </li>

                          </ul>

                          <div id="line"></div>

                </div>





        </div>



</div>



</body>

</html>

und das CSS

Code:

* {

  margin: 0px;

  padding: 0px;

}

html, body {

  height:100%;

}



#border {

  background: url(border.png);

  width:1020px;

  height:100%;

  margin: 0 auto ;



}





#main {

  background: url(mainpattern.png);

  width:1000px;

  height:100%;

  margin:0 auto;

  border-right-width:thin;

  border-right-color:silver;

  border-right-style:dashed;

  border-left-width:thin;

  border-left-color:silver;

  border-left-style:dashed;

}



#header {

  width:1000px;

  height:205px;

  background-color:black;

}



ul#navigation {

  width: 1000px;

  height: 60px;

  padding:0;

  margin:0;

}



ul#navigation li {

  list-style: none;

  margin: 0;

  padding: 0;

  display:inline;

  height:60px;

  width:200px;

  overflow:hidden;

}



#line {

  width:1000px;

  height:5px;

  background-color:#2f2f2f;

}