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