Ergebnis 1 bis 7 von 7

Thema: CSS Hintergrundbilder mit Hover-Effekt

  1. #1
    Contao-Fan
    Registriert seit
    28.06.2009.
    Ort
    Steffisburg
    Beiträge
    473

    Frage 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

  2. #2
    Contao-Nutzer
    Registriert seit
    23.06.2010.
    Ort
    Bremen
    Beiträge
    112

    Standard

    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.

  3. #3
    Contao-Fan Avatar von webster
    Registriert seit
    14.09.2010.
    Ort
    Kiel
    Beiträge
    460

    Standard

    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) (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.
    Was ist das? - Blaues Licht - Und was macht es? - Es leuchtet blau...

  4. #4
    Contao-Fan
    Registriert seit
    28.06.2009.
    Ort
    Steffisburg
    Beiträge
    473

    Gesicht zeigt die Zunge

    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

  5. #5
    Gesperrt
    Registriert seit
    01.12.2010.
    Ort
    Passau
    Beiträge
    321

    Standard

    Zitat Zitat von tognit Beitrag anzeigen
    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.

  6. #6
    Contao-Fan Avatar von webster
    Registriert seit
    14.09.2010.
    Ort
    Kiel
    Beiträge
    460

    Standard

    Zitat Zitat von tognit Beitrag anzeigen
    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).
    Was ist das? - Blaues Licht - Und was macht es? - Es leuchtet blau...

  7. #7
    Gesperrt
    Registriert seit
    01.12.2010.
    Ort
    Passau
    Beiträge
    321

    Standard

    Zitat Zitat von webster Beitrag anzeigen
    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.

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •