[HTML/CSS] Positionierungsproblem

[QUT-Clan]

[HTML/CSS] CSS Layout Problem

Hiho @all,

habe ein kleines visuelles Problem mit einem CSS Layout.
Hier die Navigationsleiste von der Page, die ich über eine Liste gelöst habe:

    <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>

Und hier das CSS:

      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;
      }

So, das Problem ist jetzt, wenn man über einen Menü Punkt mit der Maus hovert, bleibt links von der Schrift immer eine kleine weiße Stelle von 4px Breite.
Habe aber schon sämtliches probiert, überall mal padding auf 0px zu setzten, hat aber auch nix gebracht.

Ich hoffe ihr könnt mir helfen.

PS: Im Anhang noch ein Bild des Problemchenchens.

 

[mh1001]

Hallo,

ohne jetzt auf die schnelle einen Grund für eine Fehldarstellung zu sehen kannst du einmal folgendes probieren:

ersetze:

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

durch:

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

MfG mh1001

 

[QUT-Clan]

Danke, hat wunderbar geklappt.