zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Suckerfish + Opacity

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 14.09.2007, 09:50
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 31.05.2005
Beiträge: 72
timail befindet sich auf einem aufstrebenden Ast
Standard 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.
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 14.09.2007, 11:09
#
XHTMLforum-Kenner
 
Registriert seit: 30.06.2005
Ort: Hamburg
Beiträge: 2.092
IChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer Mensch
Standard

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.
__________________
Ingo Chao

Buch: Fortgeschrittene CSS-Techniken
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 14.09.2007, 17:15
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 31.05.2005
Beiträge: 72
timail befindet sich auf einem aufstrebenden Ast
Standard

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>
Kennst jemand das Problem?
Gibt es einen Workaround?
Mit Zitat antworten
  #4 (permalink)  
Alt 14.09.2007, 17:17
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 31.05.2005
Beiträge: 72
timail befindet sich auf einem aufstrebenden Ast
Standard

Obiger Code ist ohne Opacity...
Mit Zitat antworten
  #5 (permalink)  
Alt 14.09.2007, 18:19
#
XHTMLforum-Kenner
 
Registriert seit: 30.06.2005
Ort: Hamburg
Beiträge: 2.092
IChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer Mensch
Standard

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.
__________________
Ingo Chao

Buch: Fortgeschrittene CSS-Techniken

Geändert von IChao (14.09.2007 um 18:22 Uhr)
Mit Zitat antworten
  #6 (permalink)  
Alt 14.09.2007, 18:30
#
XHTMLforum-Kenner
 
Registriert seit: 30.06.2005
Ort: Hamburg
Beiträge: 2.092
IChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer Mensch
Standard

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.
__________________
Ingo Chao

Buch: Fortgeschrittene CSS-Techniken
Mit Zitat antworten
  #7 (permalink)  
Alt 25.09.2007, 07:42
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 31.05.2005
Beiträge: 72
timail befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 13:14 Uhr.