|
|||
Suckerfish + Opacity
Hallo,
eine kurze Frage: Ich habe auf einer Website das Suckerfish-Menü mit den üblichen Einstellungen laufen. Sobald ich aber einem Element Transparenz gebe (bspw. über filter:alpha(opacity=80); -moz-opacity: 0.8 klappt das Sub-Sub-Menü nicht mehr aus, die zweite Menü-Ebene schon. Kennst das Problem jemand und gibt es evtl. dafür einen Grund/ fehler meinerseits? Besten Dank & Grüße. |
Sponsored Links |
|
|||
Nun, das wird schon die üblichen Gründe haben. Ich schau mal in meine Kristallkugel und melde mich dann sofort, wenn sie mir was zeigt.
|
Sponsored Links |
|
|||
Sarkasmus in allen Ehren, ich wollte eigentlich zunächst nur wissen OB jemandem dieses Problem bekannt ist, OB es bspw. ein bekanntes und nicht lösbares Problem mit dem Suckerfish ist oder nicht.
Mein Code sieht wie der übliche Code zur Einbindung einer Suckerfish-Navigation aus, nur dass meine Liste einen backgropund hat, der über opacity transparent geschaltet wird. Sobald ich das tue öffnet sich aber die Su-Sub-Ebene nicht mehr. Hier der Code: Code:
/*---------------------- Navigation ---------------------- */ #navibox ul.menu { display: block; margin: 6px 0 0 61px; padding:0; } #navibox ul.menu li { display: block; width: 189px; height: 34px; margin:0; padding:0; list-style: none; font-size: 13px; } #navibox ul.menu li a:link, #navibox ul.menu li a:visited{ display: block; width: 149px; height: 34px; line-height: 34px; margin:0; padding:0 10px 0 38px; list-style: none; font-size: 13px; background: url(../images/navitrenner_vertikal.png) bottom left no-repeat; color: #000; text-decoration: none; } /*--- CSS Dropdown Subnavigation ---- */ #navibox ul.menu li ul { position: absolute; left: -9999px; margin: 0; padding: 0; border-left: 1px solid #666; border-right: 1px solid #666; border-top: 1px solid #666; } #navibox ul.menu li:hover ul, #navibox ul.menu li.sfhover ul { left: auto; width: 188px; margin: -35px 0 0 197px; padding: 0; } #navibox ul.menu li ul li { width: 188px; margin: 0; padding: 0; height: 24px ! important; line-height: 24px ! important; border-bottom: 1px solid #666; } #navibox ul.menu li ul li a:link, #navibox ul.menu li ul li a:visited { width: 168px; height: 24px ! important; line-height: 24px ! important; margin: 0 ! important; padding: 0 0 0 20px; background-image: none; text-transform: uppercase; } #navibox ul.menu li ul li a:hover { text-decoration: underline; } ul.menu ul li { float: left; height: 1%; } ul.menu ul li a { height: 1%; } /*--- CSS Dropdown SubSubnavigation ---- */ #navibox ul.menu li ul li ul { position: absolute ! important; left: -9999px ! important; border-left: 1px solid #666; border-right: 1px solid #666; border-top: 1px solid #666; margin: 0 ! important; padding: 0 ! important; } #navibox ul.menu li ul li:hover ul, #navibox ul.menu li ul li.sfhover ul { left: auto ! important; width: 188px ! important; margin: -25px 0 0 188px ! important; padding: 0 ! important; } #navibox ul.menu li ul li ul li { width: 188px; margin: 0; padding: 0; height: 24px ! important; line-height: 24px ! important; border-bottom: 1px solid #666; } #navibox ul.menu li ul li ul li a:link, #navibox ul.menu li ul li ul li a:visited { width: 168px; height: 24px ! important; line-height: 24px ! important; margin: 0 ! important; padding: 0 0 0 20px; background-image: none; text-transform: uppercase; } #navibox ul.menu, #navibox ul.menu li ul, #navibox ul.menu li ul li ul { background-color: #FFF; } Code:
<ul class="menu"> <li><a href="'" title="Home" accesskey="" tabindex="">Listenelement</a></li> <li><a href="'" title="Home" accesskey="" tabindex="">Listenelement</a></li> <li><a href="'" title="Home" accesskey="" tabindex="">Listenelement</a></li> <li><a href="'" title="Home" accesskey="" tabindex="">Listenelement</a> <ul> <li><a href="'" title="Home" accesskey="" tabindex="">Listenelement</a> <ul> <li><a href="'" title="Home" accesskey="" tabindex="">Listenelement</a></li> <li><a href="'" title="Home" accesskey="" tabindex="">Listenelement</a></li> <li><a href="'" title="Home" accesskey="" tabindex="">Listenelement</a></li> </ul> </li> <li><a href="'" title="Home" accesskey="" tabindex="">Listenelement</a></li> <li><a href="'" title="Home" accesskey="" tabindex="">Listenelement</a></li> </ul> </li> <li><a href="'" title="Home" accesskey="" tabindex="">Listenelement</a></li> </ul> Gibt es einen Workaround? |
|
|||
Wenn ich obigen code in eine valides Gerüst setze, dein CSS dazupacke, dann noch einen #navibox wrapper, dann noch -moz-opacity:0.8 zu der
#navibox ul.menu oder #navibox ul.menu li ul oder * {-moz-opacity:0.8;} dann klappt das submenü und auch das subsubmenu aus im Firefox, und zwar schön durchscheinend. Was muss ich tun, damit ich den Fehler sehe? Den IE Anwerfen? Welchen? Netscape 8 benutzen? Grafiken erstellen und hinzufügen? Den Doctype entfernen? Typos hinzufügen? Das Ganze irgendwie noch in weitere Wrapper stellen und denen ein z-index verpassen? Es ist zum Verzweifeln hier. Geändert von IChao (14.09.2007 um 18:22 Uhr) |
|
|||
Wenn dein Problem im Internet Explorer sichtbar ist, und nur dort, dann liegt das vielleicht daran, dass der Probleme damit hat, Links, die auf Filtern sitzen, welche in positionierten Elementen liegen, nicht mehr reagieren lässt. Das ist ein großes Problem und hier beschrieben.
|
|
|||
Entschuldigt, ich war leider einige Tage nicht "vor Ort", deshalb erst jetzt die verspätete Antwort: Das Problem tritt tatsächlich im IE6 und IE7 auf, der FF läuft problemlos.
@IChao: Danke für den letzten Hinweis, das wird es wohl sein nehme ich an. Ich werde einmal in die Richtung weiterforschen. Vielen Dank einstweilen, sollte ich eine Lösung gefunden habe poste ich diese hier. Beste Grüße Tim. |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
jquery opacity frage? | sepp88 | Javascript & Ajax | 8 | 03.12.2009 13:21 |
Falsches Anzeigen eines Suckerfish menüs im IE | PuriX | CSS | 7 | 06.08.2008 00:42 |
Fly out Menu - mit Peterned´s csshover.htc oder Suckerfish JavaScript? | Chico_wau | CSS | 2 | 07.07.2008 23:01 |
[JavaScript] Suckerfish etwas anders gebraucht. // error | dayscott | Javascript & Ajax | 5 | 07.08.2007 12:22 |
opacity Problem | (55 | CSS | 5 | 08.05.2007 12:38 |