Hallo miteinander!

Ich habe im Footer meiner neuen Webseite drei Grafiken, die etwas aufgepeppte Texte sind (das hängt mit der CI der Firma zusammen, da ist die Hausschrift Univers). Aussehen soll das etwa so:

--------------------------------------------------
                    Blog | Übersicht | Impressum
--------------------------------------------------

Das Problem ist: Die Ü-Punkte bei Übersicht sind zwei Pixel über dem B von Blog und dem I von Impressum. Und genau um diese beiden Punkte ist das jetzt schief.

Ich hab alles mögliche probiert und stehe jetzt ziemlich auf dem Schlauch:

• Nach wie vor verstehe ich nicht, warum es nicht geht, wenn man bei blog.png und impressum.png einfach zwei leere Pixel drauftut. Es ändert aber nichts am Ergebnis. Ich check es einfach nicht.

• Ich habe auch versucht, einzelne IDs zu vergeben, aber aus Gründen, die ich ebenfalls nicht verstehe, gilt jeweils die ID mit dem größten Margin-Top für alle.

Der Code dafür ist so:

  
<div id="footer">  
<div id="footer_btn">  
    <a href=""><img onMouseOver="this.src='img/blog_a.png'" onMouseOut="this.src='img/blog.png'" src="img/blog.png" width="25" height="21" alt="Blog"></a>  
    <a href =""><img src="img/vertical_line.png" alt="Seperator" width="2" height="18" /></a>  
    <a href =""><img src="img/uebersicht.png" alt="Übersicht" width="55" height="21" onMouseOver="this.src='img/uebersicht_a.png'" onMouseOut="this.src='img/uebersicht.png'" /></a>  
    <a href =""><img src="img/vertical_line.png" alt="Seperator" width="2" height="18" /></a>  
    <a href =""><img src="img/impressum.png" alt="Impressum" width="63" height="21" onMouseOver="this.src='img/impressum_a.png'" onMouseOut="this.src='img/impressum.png'" /></a>  
    </div>  
</div>  

Der CSS Code der folgende:

  
#footer {  
	height:48px;  
	background-image: url(img/footer.png);  
	background-repeat: repeat-x;  
}  
  
#footer_btn {  
 margin-right:50px;  
	float:right;  
 margin-top: 11px;  
}  

Bitte helft mit! Danke!