Hallo,
vielen Dank für eure Antworten. Ich habe mich für die Lösung mit den Hintergrundbildern entschieden, da mir dies im Nachhinein auch semantisch gesehen sinnvoller erscheint. Allerdings habe ich auch die Sache mit den Whitespaces probiert, dies hat aber auch nicht funktioniert. Nunja, hier jetzt mein aktueller Quellcode, der soweit auch funktioniert:
HTML Ausschnitt:
<ul id="navigation">
<li><a id="btn-en_news" href="#"><span class="invis">News</span></a></li>
<li><a id="btn-en_about" href="#"><span class="invis">About me</span></a></li>
<li><a id="btn-en_projects" href="#"><span class="invis">Projects</span></a></li>
<li><a id="btn-en_partner" href="#"><span class="invis">Partner</span></a></li>
<li><a id="btn-en_contact" href="#"><span class="invis">Contact</span></a></li>
<li><a id="btn-en_imprint" href="#"><span class="invis">Imprint</span></a></li>
</ul>
CSS Ausschnitt:
#navigation
{
position:absolute;
margin:0;
padding:0;
list-style-type:none;
top:279px;
left:0;
}
#navigation li
{
margin:0;
padding:0;
}
#navigation a
{
display:block;
width:114px;
overflow:hidden;
margin:0;
padding:0;
}
#navigation #btn-en_news
{
height:32px;
background-image:url(../images/btn-en_news.png);
}
#navigation #btn-en_news:hover
{
background-image:url(../images/btn-en_news_hover.png);
}
... usw
Mit freundlichen Grüßen,
Greg