CSS-Problem MSIE mit Transparenz beim Dropdown-Menü

[Rudi66]

Hallo,

ich verwende das Dropdown-Menü "Dropdown-Navigation Horizontal (nur CSS, kein JS)", was auch soweit super funktioniert! Nur beim IE gibt es mit dem Hintergrund, für den ich ein "background-image" verwende, folgendes Problem:

Wenn ich eine dritte Menüebene habe, wird der Hintergrund bei der übergeordneten Ebene doppelt dargestellt - was eigentlich nicht schlimm ist, aber wenn man die Hintergrundgrafik transparent darstellt, ist der Hintergrund an der Stelle doppelt so stark.

[ externes Bild ]

Der entsprechende CSS-Code (nur die Zeilen, wo der Hintergrund definiert ist):

Code: Alles auswählen

.nav2nd a {
	width: 100px;
	background-image: url(menue-hintergrund.png);
}
.nav3rd a {
	width: 140px;
}
/* li:hover  für non-IE-Browser  ---  a:hover  für IE */
  .menu ul li:hover a,
  .menu ul li a:hover {
	background-image: url(menue-hintergrund.png);
}

Ich habe schon viel probiert und getestet, aber der IE stellt in allen möglichen Varianten den Hintergrund falsch dar. Hat jemand von Euch eine Idee?

Viele Grüße
Rudi

[anita]

Hallo Rudi,

könnte daran liegen, dass der IE mit Transparenz in png Probleme macht. Vielleicht hilft Dir das:

http://visualhype.de/transparente-png-g ... xplorer-6/

[Ingo]

Was immer hilft ist ein Link zur betreffenden Seite. Dann läuft die Glaskugel nicht so heiss...
Welcher IE übrigens? 6, 7, 8 oder 9? Und auf welchem BS?

[Rudi66]

Hallo,

getestet hatte ich das auf IE 8 (Windows 7).

Die Seiten sind auf meinen Testsytem unter http://www.vorplanung.de/annwn zu erreichen, allerdings habe ich jetzt den Hintergrund des Menüs zunächst auf Schwarz, Transparenz 70%, geändert, deshalb ist das Problem nicht mehr so zu erkennen wie oben auf der Grafik.

Ich überlege ich nun auch , ob ich nicht grundsätzlich auf "Superfish Jquery Dropdown Navigation" umstelle, denn beim CSS-Dropdown-Navi habe ich festgestellt, dass man nicht einfach das aktive Menü in einer anderen Schriftfarbe darstellen bzw. hervorheben kann.

Gruss
Rudi

[Ingo]

Du hast ganz andere Probleme. Abgesehen vom hundsmiserablen Kontrast, der das Erkennen und Bedienen der Navigation extrem erschwert (hat nicht jeder gute Augen/ guten Monitor), verschwindet die Navigation auf kleineren Bildschirmauflösungen. Das liegt an der Art, wie du die Seite vertikal zentrierst. Geht so nicht, definitiv. Definiere einen fixen Abstand von oben.

[Rudi66]

Ingo, vielen Dank für den Hinweis, aber das Problem ist schon bekannt! Allerdings sind wir auch noch am Anfang der Seitenentwicklung, die Feinabstimmung mit Menüfarben usw. folgt noch. Bezüglich der vertikalen Ausrichtung kann ich den oberen Abstand nicht fixieren, da die Seiten bei größeren Bildschirmen immer Mittig dargestellt werden sollen. Für kleinere Bildschirme werden wir uns noch was überlegen, evtl. eine gesonderte CSS-Datei.

Trotzdem Danke nochmal für den Hinweis!

Gruss
Rudi

[Ingo]

Mach die Zentrierung per Javascript. Nimm die Höhe des Viewports, subtrahier die Höhe der Website. Wenn Ergebnis > 0 teil Ergebnis durch 2 und ändere den den per CSS gesetzten Abstand nach oben. Mit deinem bisherigen Markup und CSS allein bekommst du die Zentrierung nicht hin.