Mario Sch.: Darstellungsproblem IE7 mit a display: block

Beitrag lesen

Hallo,

ich bin gerade dabei eine Navigationsleiste zu erstellen.
Diese erstelle ich in einem div, darin ein <ul> Element und in diesem für jeden Eintrag in der Leiste ein <li>.
Ich habe für die einzelnen Einträge einen Hintergrund, 155x25px groß.
Diese Größe ist auch den li-Tags zugewiesen.
In den li-Elementen habe ich nun die Links zu den einzelnen Seiten Platziert. Damit sie nicht am oberen Rand von dem Hintergrund kleben, habe ich dem <a>-Tag das CSS-Attribut display: block zugewiesen und padding auf 6px.
Das Problem, das im IE 7 dabei entsteht: Nach dem li-Element entsteht ein etwa 2px großer freiraum.
Das möchte ich aber irgendwie wieder weg bekommen. Wenn ich das display: block weglasse, entsteht er nicht, aber dann kann ich auch kein padding mehr benutzen.
Eine andere alternative ist, dem a-Element noch die width: 155px-(2mal padding) und die height 25px-(2mal padding) zuzuweisen, aber diese Alternative erscheint mir nicht sehr elegant.
(FF und Opera haben keine Darstellungsprobleme damit)

Hier einmal der Quelltext:

<div id="hauptnavigation">
    <ul>
      <li><a href="test.php">tet</a></li>
      <li><a href="test.php">test2</a></li>
    </ul>
  </div>

in der CSS-Datei:

* {
  padding: 0;
  margin: 0;
}
#navibar {
  width: 155px;
  background-color: #ff0000; /* nur um die ca 2px besser zu sehen die weg sollen  */
  color: #2E3192;
}
#navibar ul, #navibar ul li {
  list-style: none;
}
#navibar a {
  text-decoration: none;
  display: block;
  color: #2E3192;
  width: 143px; /* hier wie gesagt die 155px minus 12px padding */
  height: 13px;
}
#navibar ul li {
  font-weight: bold;
  background: transparent url(img/navibarentry.png) no-repeat;
  width: 155px;
  height: 25px;
}
#navibar ul li a {
  padding: 6px;
}

Bin für alle Lösungsvorschläge dankbar :)

Grüße
Mario