CSS-Problem MSIE mit Transparenz beim Dropdown-Menü

Fragen rund um PHP,HTML,CSS und MySQL

CSS-Problem MSIE mit Transparenz beim Dropdown-Menü

Beitragvon Rudi66 » 17. Mär 2011, 15:25

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.

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
Benutzeravatar
Rudi66
 
Beiträge: 12
Registriert: 11. Mär 2008, 17:29
Wohnort: Hildesheim

Re: CSS-Problem MSIE mit Transparenz beim Dropdown-Menü

Beitragvon anita » 19. Mär 2011, 13:59

Hallo Rudi,

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

http://visualhype.de/transparente-png-grafiken-im-internet-explorer-6/
Gruß Anita

javanita engineering, immer eine zündende Idee
http://www.javanita.com
Benutzeravatar
anita
 
Beiträge: 298
Registriert: 25. Jan 2007, 09:25
Wohnort: Finsterwalde

Re: CSS-Problem MSIE mit Transparenz beim Dropdown-Menü

Beitragvon Ingo » 19. Mär 2011, 15:34

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?
Ingo
 
Beiträge: 290
Registriert: 23. Jun 2010, 23:34

Re: CSS-Problem MSIE mit Transparenz beim Dropdown-Menü

Beitragvon Rudi66 » 21. Mär 2011, 09:32

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
Benutzeravatar
Rudi66
 
Beiträge: 12
Registriert: 11. Mär 2008, 17:29
Wohnort: Hildesheim

Re: CSS-Problem MSIE mit Transparenz beim Dropdown-Menü

Beitragvon Ingo » 21. Mär 2011, 10:58

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.
Ingo
 
Beiträge: 290
Registriert: 23. Jun 2010, 23:34

Re: CSS-Problem MSIE mit Transparenz beim Dropdown-Menü

Beitragvon Rudi66 » 22. Mär 2011, 12:40

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
Benutzeravatar
Rudi66
 
Beiträge: 12
Registriert: 11. Mär 2008, 17:29
Wohnort: Hildesheim

Re: CSS-Problem MSIE mit Transparenz beim Dropdown-Menü

Beitragvon Ingo » 22. Mär 2011, 15:13

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.
Ingo
 
Beiträge: 290
Registriert: 23. Jun 2010, 23:34


Zurück zu PHP/HTML/CSS/MySQL

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 2 Gäste

cron