[HTML/CSS] Positionierungsproblem

    <ul id="navigation">
      <li><a href="index.php?id=elektro">Elektroinstallation</a></li>
      <li><a href="index.php?id=photo">Photovoltaik</a></li>
      <li><a href="index.php?id=waerme">Solarthermie</a></li>
      <li><a href="index.php?id=erde">Erdwärme</a></li>
      <li><a href="index.php?id=heizung">Elektroheizsysteme</a></li>
      <li><a href="index.php?id=beratung">Beratung & Planung</a></li>
      <li><a href="index.php?id=referenz">Referenzobjekte</a></li>
    </ul>

      ul#navigation {
      font-size: 15px;
      background-image: url('../images/navbar/head.gif');
      background-position: left bottom;
      background-repeat: no-repeat;
      color: #3C3C3C;
      margin: 0;
      height: 31px;
      padding: 0 0 0 10px;
      white-space: nowrap;
      }
      ul#navigation li {
      margin: 0;
      padding: 0;
      list-style: none;
      display: inline;
      }
      /* Ausrichtung für den IE */
      ul#navigation a, ul#navigation a:link {
      position: relative;
      bottom: -5px;
      padding: 4px 4px 8px 3px;
      border-right: 1px solid #3c3c3c;
      }
      /* Für die anderen Browser */
      html>body ul#navigation a, html>body ul#navigation a:link {
      position: relative;
      bottom: -6px;
      }
      ul#navigation a:hover {
      background: #dddddd;
      color: #DD6900;
      }

ul#navigation li {
  margin: 0;
  padding: 0;
  list-style: none;
  display: inline;
}

ul#navigation li {
  margin: 0;
  padding: 0;
  display: block;
  float: left;
}