frage zu tab design via css

[brezel]

hallo,

ich lese mir grad
http://www.alistapart.com/articles/slidingdoors/
durch.

ich hab jetzt aber ein verständnisproblem:

#header li {
    float:left;
    margin:0;
    padding:0;
    background:url("norm_right.gif")
    no-repeat right top;
}

#header a {
    display:block;
    background:url("norm_left.gif")
      no-repeat left top;
    padding:5px 15px;
    }

<div id="header">
    <ul>
      <li><a href="#">Home</a></li>
      <li id="current"><a href="#">News</a></li>
      <li><a href="#">Products</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
</div>

background:url("norm_left.gif")no-repeat left top;
liegt ja über
background:url("norm_right.gif")no-repeat right top;

warum aber ist es so dass die linke kante von "norm_right.gif"
nicht über linken kante von "norm_left.gif" sondern die kanten aneinander liegen ?
wie kann der text zentriert stehen ?

hmmm...
danke !