'a href ' Tag verursacht Problem im FF

[molily]

Sogenannte ersetzte Inline-Elemente wie <img> liegen auf der Grundlinie der CSS-Zeilenbox. Ich vermute, daher kommt die Verschiebung, die du feststellst.

Du kannst die Bilder in der Zeilenbox mit vertical-align positionieren. Standard ist baseline (die besagte Grundlinie), mit vertical-align:bottom für die img-Elemente liegt die Grafik ganz unten.

#menu_navi img {
   vertical-align: bottom;
}

Alternativ könntest du dem img-Element (und bei der Gelegenheit auch den a-Elementen) display:block geben, dadurch gibts gar keine Zeilenbox mehr, weil es sich dann um Blockelemente handelt:

#menu_navi a, #menu_navi img {
   display: block;
}

Ferner würde ich dir raten:

• Setze zumindest die alt-Attribute bei den Bildern korrekt. Das ist ganz wichtig für die Zugänglichkeit deiner Site.
• Noch besser: Verwende sauberes Markup und lagere die Bilder sowie die Highlight-Logik aus. So würde ich das HTML bauen:

<ul id="navi">
<li id="navi-home"><a href="...">Home</a></li>
...
</ul>

Der Rest lässt sich viel übersichtlicher mit CSS umsetzen. Stichwörter: CSS Image Replacement und CSS Sprites.

Mathias