Hilko: Link-Hintergrundbild

SELF-Forum

Link-Hintergrundbild

Hilko
– Informationen zu den Bewertungsregeln

Hallo!

Ich habe folgendes Problem: ich möchte einige Links mittels CSS und einem Hintergrundbild mit einem Roll-Over-Effekt versehen, im Prinzip klappt es bestens, nur leider zeigt Mozilla das Hintergrungbild an anderer Stelle als IE und Opera - bei diesen beiden klappt die Angabe 'background-position:0px 0px;' korrekt, Mozilla schiebt das Bild um 4px nach unten. Mit dem unten stehenden Hack kann ich das zwar kompensieren, aber dann ist's bei Opera wieder nicht richtig. Das Problem ist wohl, dass Mozilla das line-height anders interpretiert als die anderen!?

Die CSS-Angaben:
a {
 font:14px/20px verdana, arial, helvetica, sans-serif;
 text-decoration:none;
 font-weight:600;
 width:130px;
 padding:0px 0px 0px 28px;
 line-height:25px;
 color:#bbb;
 background-image:url(../images/menue_link.gif);
 background-repeat: no-repeat;
 background-position:0px 0px;
 voice-family: ""}"";
   voice-family:inherit;
   background-position:0px -4px;
}

Vielleicht kann mir jemand 'nen Tipp geben was ich hier falsch anpacke?

Danke!
Hilko

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Link-Hintergrundbild

    Axel Richter
    – Informationen zu den Bewertungsregeln

    Hallo,

    Ich habe folgendes Problem: ich möchte einige Links mittels CSS und einem Hintergrundbild mit einem Roll-Over-Effekt versehen, im Prinzip klappt es bestens, nur leider zeigt Mozilla das Hintergrungbild an anderer Stelle als IE und Opera - bei diesen beiden klappt die Angabe 'background-position:0px 0px;' korrekt,

    *g* Nein, leider nicht korrekt, sondern falsch.

    Mozilla schiebt das Bild um 4px nach unten.

    Das ist zwar auch nicht korrekt, aber, da Dein CSS fehlerhaft ist, nicht zu bemängeln.

    Die CSS-Angaben:
    a {
     font:14px/20px verdana, arial, helvetica, sans-serif;
     text-decoration:none;
     font-weight:600;
     width:130px;

    width wird nur bei block-level and replaced elements interpretiert

    padding:0px 0px 0px 28px;
     line-height:25px;
     color:#bbb;
     background-image:url(../images/menue_link.gif);
     background-repeat: no-repeat;
     background-position:0px 0px;

    background-position wird nur bei block-level and replaced elements interpretiert

    Vielleicht kann mir jemand 'nen Tipp geben was ich hier falsch anpacke?

    http://www.w3.org/TR/REC-CSS2/colors.html#background-properties

    Du musst das a-Element als Block anzeigen lassen.
    a {
      display:block;
      ...

    viele Grüße

    Axel

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln