CSS Hintergrundbilder mit Hover-Effekt

Hallo zusammen

Habe da ein Problem im IE mit der Positionierung von Hintergrundbildern.

Ich gebe li-Elementen ein Hintegrundbild mit, dass beim hover wechselt (Hover- und Activebild in einem). Alle Browser auser der IE zeigen alles korrekt an.

Der IE (7 - 9) drückt das Bild beim hover nach unten oder nach oben. Ist das ein bekanntest Problem mit dem IE?

Mein Code:

HTML-Code:

---

ul li a {
background: transparent url("../../files/references/logos/logo.png") left -100px no-repeat;
}
ul li a:hover,
ul li strong {
background: transparent url("../../files/references/logos/logo.png") left 0px no-repeat;
}

---

Ich hoffe da kann mir jemand helfen.

Die Seite ist noch nicht Live!

Grüessli
Steven

Ich weiß nicht, ob es hilft, aber ich geb' das immer so an:

HTML-Code:

---

#navi_top li { background:url(../images/bild.jpg) no-repeat; }

#navi_top li:hover { background:url(../images/bild.jpg) 0 -55px no-repeat;

---

Das funktioniert ohne zu wackeln in allen Browsern.
Für den IE < 7 hatte ich noch eine htc Datei, aber der interessiert nicht mehr.

Hallo Steven,

laut CSS-Spezifikation ist eine Mischangabe aus Schlüsselwörtern (left, top, etc.) und absoluten Werten (-100px) für die Positionierung von Hintergrundbildern nicht zulässig. Die meisten Browser interpretieren eine solche Angabe korrekt, der IE gehört aber leider oft NICHT zu den "meisten" Browsern (was hier durchaus korrekt wäre) :D (bei dieser speziellen Sache bin ich mir allerdings im Moment nicht sicher).
Probiere es mal mit der 0 anstatt left, dann sollte es eigentlich klappen.

Hallo zusammen

Besten Dank für die Hilfe! Leider klappt es nicht. Das seltsame ist, dass es nicht alle li-Elemente betrifft. Von 10 Bildern "hüpfen" Vier und der Rest ist korrekt.

Gruss

Zitat:

---

Zitat von tognit

Die Seite ist noch nicht Live!

---

deine Infos sind ausgesprochen dürftig und auch widersprüchlich! Du spricht von li aber in deinem Codebeispiel hat a das HG-Bild (was auch richtig wäre!).

Daraus ergeben sich die nächsten Fragen:
Wie sieht den der entspr. Quelltext aus? Ist der Text des Links im Bild oder ist das Bild nur der HG.
Je nachdem kann es zwei unterschiedliche Lösungen geben z.B.:
Text mit im Bild
Bild nur HG

Aber das ist nur wild geraten.

Bastel einen Testcase zusammen das den Fehler zeigt, lad den hoch und poste den Link hier, dann wird die Hilfe auch effektiv sein. ;)

Zitat:

---

Zitat von tognit

Hallo zusammen

Besten Dank für die Hilfe! Leider klappt es nicht. Das seltsame ist, dass es nicht alle li-Elemente betrifft. Von 10 Bildern "hüpfen" Vier und der Rest ist korrekt.

Gruss

---

Poste doch mal die Hintergrundbilder der einzelnen Elemente. Ich vermute, dann hast Du da irgendwo einen "Fehler" drin (zu viel oder zu wenig Abstand der einzelnen Elemente).

Zitat:

---

Zitat von webster

Poste doch mal die Hintergrundbilder der einzelnen Elemente. Ich vermute, dann hast Du da irgendwo einen "Fehler" drin (zu viel oder zu wenig Abstand der einzelnen Elemente).

---

das würde doch nur eine weitere Raterunde einläuten, oder?
Wir kennen doch weder den ausgegebenen Quelltext noch das restliche CSS. ;)