IE lte 6 BG-Image Probleme beim Hovern von Listenelementen

etux · #1 (**permalink**) 24.09.2008, 16:43

Hallo,
bei unserem aktuellen Projekt habe ich zwei Probleme mit der Navigation.
1.Betroffen ist nur der IE5.0 - Wenn man mit der Maus über die Navigation fährt, wird sie zerschossen. Dieses Problem habe ich schon gehabt, allerdings nur beim Benutzen der TAB-Taste und nicht beim Überfahren mit der Maus. Wie ich es damals gelöst habe, weiß ich leider nicht mehr.
2.Betroffen sind die IEs 5.0-6.0 – beim Hovern eines Menu-Punktes erscheint die Hintergrund-Grafik nicht (die Hintergrund-Farbe schon).

Code:

ul#mainNav li:hover {
	background: #fff url(../img/RO.gif) no-repeat 100% 100%;
}

Wenn ich den einen Punkt in dem Pfad entferne,

Code:

ul#mainNav li:hover {
	background: #fff url(./img/RO.gif) no-repeat 100% 100%;
}

funktioniert es in den IEs, im FF und Co aber nicht.

Drei Tests dazu:
a) in der CSS-Datei für alle Browser steht

Code:

url(../img/....gif)
}

die IEs bekommen exta eine CSS-Datei mit:

Code:

url(./img/....gif)

Ergebnis: Alle Browser – o.k., IEs 5-6 keine Grafik.

b) für alle Browser gilt

Code:

url(./img/....gif)

ohne extra CSS für die IEs.

Ergebnis: Funktioniert nur bei den IEs.

c) ohne extra CSS für die IEs, dafür aber mit !Important

Code:

ul#mainNav li:hover {
	.......................................
	background: #fff url(../img/RO.gif) no-repeat 100% 100% !Important;
	background: #fff url(./img/RO.gif) no-repeat 100% 100%;
}

Ergebnis: In allen Browser o.k.

Getestet habe ich auch: die gehoverte LIs bekommen „position: relative“ mit oder ohne „z-index“. Nichts passiert.
Vielleicht könnte ich noch „background“ in „background-color“, background-image“,...... aufteilen und dann beim Hovern nur die „background-position“ ändern.

Im Grunde funktioniert es mit „!Important“ browserübergreifend ( Kann bitte einer mit IE7 und/oder IE8 kurz vorbei schauen- von denen kann ich nur Screenshots ohne Hover-Effekte sehen).
Im Moment wird pro Menü-Punkt nur eine Grafik benutzt. Womöglich werden es aber in der End-Version jeweils zwei. Daher interessiert es mich sehr, woran es liegt und ob es nicht eine elegantere Lösung dafür gibt.

Hier ist ein
Test-Case.

„zur Startseite“ lädt die Variante a). von Oben.
„mit ./“ lädt die b)-Variante und
„mit Important“ die Variante c).

Es ist aber keine Frequenzweiche. Klick auf einen der Links lädt die Startseite der entsprechende Variante ( Kein Menü-Punkt ist gewählt).
Die Menü-Punkte der ersten Ebene sind an, die der Zweiten nicht.
Achtet bitte nicht auf die Qualität der Grafiken. Später werden sie von unserer Grafik-Designerin gemacht. Mir geht es jetzt nur um die Funktionalität.

Danke und Grüße: Emil

Edit: Am besten sieht man das Problem, wenn man z.B. auf "Literaturwelt" klickt und wenn die neue Seite geladen wird, mit der Maus über "Federwelt" fährt.
Edit 2: Hier die entsprechende CSS-Dateien:

Edit 3: Habe ich gelöscht. Es ist nur eine Variante online. Link s.Oben. Grund: Hat sich dank Boris erledigt.

Danke und Grüße: Emil

Boris · #2 (**permalink**) 24.09.2008, 17:41

Ändere die Pfadangabe einfach, so dass es für alle Browser passt:

background: #fff url(/kompletter/pfad/zum/bild/img/RO.gif)

Wichtig ist hierbei der erste Slash / (ohne . Punkt).

etux · #3 (**permalink**) 24.09.2008, 18:58

Super, Boris! Danke Dir.

Könntest Du (oder auch die Andere) bitte testen, wie es jetzt im IE7 oder IE8 ausschaut?
Hover-Test

Danke Dir und Grüß: Emil

Boris · #4 (**permalink**) 24.09.2008, 21:55

Isch 'abe keinen IE

etux · #5 (**permalink**) 31.10.2008, 15:42

Sorry, habe den Beitrag gelöscht. Irgendwas ist beim Kopieren bzw. Hochladen schief gegangen.
Werde ich korrigieren und wieder posten.
Sorry noch mal. Grüße: Emil

Hier geht es weiter.
Grüße: Emil

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Imagemap Zugriff bei einer Gallery	Sarah14	Javascript & Ajax	3	12.11.2007 14:06
neues Background image von Liste bei hovern?	McFarlane	CSS	19	07.06.2007 00:04
Probleme mit Image Positionierung	Pumpkin	(X)HTML	5	07.08.2005 18:18
Probleme mit Background Image	Flo01	CSS	3	16.04.2005 09:36