Problem mit Hintergrundgrafik im <a>-Element

[Ingo Siemon]

Hallo

Es geht um folgende Seite:
http://spaceart.de/_Test2/listen/modelle-science-fiction-fantasy-pq.htm

Bei der alphabetischen Buchstaben-Nacigation oben unter dem Bild
habe ich dem <a>-Element eine kleine Hintergrundgrafik per CSS zugewiesen.
Diese soll dafür sorgen, dass der gerade aktive Link markiert ist.

Diese Hintergrundgrafik soll ganz oben an der Innenseite des Rands "kleben".
Das funktioniert soweit auch ganz gut.
Wenn man aber nun z.B. im IE6 den Schruftgrad auf "Sehr groß" stellt,
bildet sich plotzlich ein kleiner Abstand zwischen der Grafik und dem Rand.
Das Gleiche tritt auch bei Firefox auf.
Und im Opera wandert diese Grafik sogar über den Rand nach oben,
wenn man sehr hoch oder tief zoomt.

Ich habe gestern stundenlang herumprobiert, bin dann aber
doch erfolglos ins Bett gegangen :)
Darum möchte ich Euch hier heute morgen um Hilfe bitten.
Vielleicht habt Ihr ja einen Denkanstoss für mich, woran es liegen könnte.

Hier ist noch ein Link zu meiner CSS-Datei:
http://spaceart.de/_Test2/css/css-standard.css

Und hier nochmal der entscheidende Bereich als Code:

  
  div.buchstaben {  
    border: 1px solid #3d3d3d;  
    background: #d5d5d5;  
    width: 502px;  
    margin-top: 7px;  
    padding: 4px 3px 0;  
  }  
  
  div.buchstaben a:link, div.buchstaben a:hover, div.buchstaben a:active, div.buchstaben a:focus, div.buchstaben a:visited {  
    text-decoration: none;  
    color: #0f255c;  
    padding: 6px 2px 0;  
  }  
  
  div.buchstaben .mark {  
    background: url(/_Test2/bilder/navigation-aktiv.gif) repeat-x;  
    color: #0f255c;  
    font-weight: bold;  
    padding: 6px 2px 0;  
  }  

Gruß
Ingo