Problem mit Hintergrundgrafik im <a>-Element
Ingo Siemon
0 
Marc
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
-
Hallo zusammen,
Hallo
Es geht um folgende Seite:
http://spaceart.de/_Test2/listen/modelle-science-fiction-fantasy-pq.htmBei 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.Bei mir, da ich Schriftarten meist vergrößer und dann ein Teil der Buchstaben in eine zweite Reihe rutscht.
Und warum eine Hintergrundgrafik? Es handelt sich da doch nur um eine Linie - keine Ahnung, warum dafür nicht border-top benutzt...
Viele Grüße,
Marc.-
Lieber Marc
Und warum eine Hintergrundgrafik? Es handelt sich da doch nur um eine Linie - keine Ahnung, warum dafür nicht border-top benutzt...
Hmmm, keine schlechte Idee :)
Da bin ich wohl vor leuter Betriebsblindheit gestern
abend direkt in einer Sachgasse stecken geblieben.Ich werde das sogleich mal ausprobieren.
Danke für die prima Idee.Gruß
Ingo -
Lieber Marc
... warum dafür nicht border-top benutzt...
OK, ich habe das in der linken Hauptnavigation nun umgesetzt.
Und da funktioniert es auch wunderbar.Bei der horizontalen Buchstaben-Navigation will es noch nicht so recht klappen.
Das hängt doch sicher damit zusammen, dass der Text,
der in dem <a>-Element steht oben noch einen spezeiieln Abstand hat,
den man nicht einfach mit padding:0 wegbekommt, oder?Ich habe hier mal ein spwzielles Test-Beispiel erstellt:
http://spaceart.de/_Test2/listen/_test.htm
So, wie es jetz ist, klappt es gut.Aber wenn ich in dem body nun noch ein line-height:140%; gebe,
entsteht wieder das Problem, dass wieder ein Abstand ensteht.
Zu sehen hier:
http://spaceart.de/_Test2/listen/_test2.htmIch habe nun auch schon versucht, dem div.buchstaben
einen line-height:none; zu geben. Aber das funktioniert nicht.Hat von Euch nicht noch jemand eine Idee, wie ich das lösen kann?
Gruß
Ingo
-