✔ IE Kompatibilität für Menü

[Superdok]

Hi,
Ich habe folgendes Menü gebastelt:
Html:

<div id="navigation">
			<ul>
				<li><a href="#"><font size="5">Test1</font></a></li>
  				<li><a href="#"><font size="2">Test2</font></a>
					<ul>
						<li><a href="#">Test2 1</a></li>
						<li><a href="#">Test2 2</a></li>
					</ul>
				</li>
	  			<li><a href="#"><font size="6">Test3</font></a></li>	  	 
			</ul>
</div>

#navigation {
	float:right;	
	height:100%;	
	padding-top: 10px;	
	margin-right:80px;	
	display:inline;	/* IE Double Float Bug Fix */
}

#navigation ul {
	display:block;	
	list-style-type: none;	
	margin: 0px;
	padding: 0px;	
}

#navigation ul li {	
	margin: 0px;
	padding: 0px;
	border:none;
	text-align:right;
}

#navigation ul li a{	
	text-decoration: none;	
	color: #575757;		
	text-align:right;	
}

#navigation ul li a:hover {	
	text-decoration: none;	
	border-bottom-width: 1px;
	border-bottom-style: dashed;
	border-bottom-color: #575757;	
	text-align:right;	
}

#navigation li ul {	
	display:none; 
}

#navigation li:hover ul { 
	display:block; 
}

Das Submenü ist nur zweckmäßig. Ich werde es erst versuchen zu gestalten, sobald es funktioniert.
Das Menü funktioniert soweit im Firefox ohne Probleme. Ich weiß, dass es im Internet Explorer 6 nicht funktionieren kann, da dieser das :hover Element nur bei Links akzeptiert. Meine Frage ist nun, was die beste Möglichkeit ist dieses Menü auch im Internet Explorer zum Laufen zu kriegen. Ich habe schon selbst gesucht und folgendes gefunden:
http://www.xs4all.nl/~peterned/csshover.html

Ich habe die .htc Datei in mein Verzeichnis und bei body

behavior: url("csshover3.htc");

hinzugefügt. Leider hat es trotzdem nicht funktioniert. Was habe ich falsch gemacht bzw. wo habe ich falsch gedacht.
Gibt es andere bessere Möglichkeiten, um diess Menü im IE6 zum Laufen zu bekommen?

 

[Maik]

Hi,

das HTML-Dokument, das Stylesheet und die HTC-Datei müssen sich gemeinsam in einem Verzeichnis befinden.

Alternativ kann ich dir Suckerfish Dropdowns empfehlen, wenn du hier dem IE6 mittels JS unter die Arme greifen willst.

Ansonsten schau dich mal bei Stu Nicholls Dropdown Menüs um, die ohne zusätzliches JS im IE6 funktionieren.

mfg Maik

 

[Superdok]

Sie befinden sich im selben Verzeichnis, aber trotzdem funktioniert es nicht.

Ich wollte die Stu Nicholls Menüs verwenden, aber mit wäre es lieber eins selber zu machen. Aber im Notfall greife ich daruf zurück.

 

[Maik]

Wenn dem so ist, kann ich dir nicht weiterhelfen, denn so funktioniert der "csshover3.htc"-Hack bei mir im IE6 einwandfrei.

Hast du dir denn meine empfohlenen "Suckerfish Dropdowns" angeschaut?

Die sind da wesentlich "pflegeleichter", was die Verzeichnisstruktur der drei involvierten HTML-, CSS-, JS-Dateien betrifft, und kommen zudem mit einem deutlich schlankeren Code daher, um die fehlende Unterstüzung der allg. li:hover-Pseudoklasse im IE6 auszugleichen.

mfg Maik

 

[Superdok]

Ich werde sie mir gleich anschauen und schauen ob ich diese zum Laufen kriege.
Empfielst du mir eher die "Suckerfish Dropdowns" oder die "Stu Nicholls Dropdown Menüs"?

Nochmal zurück zum HTC Dokument: Ich habe die Datein auf meinen Server hochgeladen und dort funktioniert es.
Im IE allerdings erscheint zwar beim Überfahren von Test2 das Submenü, aber sobald ich auf Test2 1 oder Test2 2 fahren will blendet sich das Menü wieder aus. Das Submenü ist also nicht anwählbar. Im FF funktionierts wieder.

Zum Aussehen des Submenüs: Im Moment zeigen sich die Submenüs unterhalb der Oberpunkte an, wenn man drüberfährt (zumindest richtig im FF). Ich habe versucht, dass das Submenü nicht unterhalb der Oberpunkte angezeigt wird, sondern rechts davon:

Test1
Test2 Test2 1
Test3 Test2 2

Die Maus befindet sich über dem fetten Test2, rechts ist das Submenü

Nur leider schaffe ich dies nicht. Ich habe bei anderen SUbmenüs geschaut und es z.B. mit "position:absolute" versucht. Aber dies funktionierte auch nicht. Die Submenüpunkte waren bereits an jeder Stelle, aber nicht einmal rechts davon.
Mit welcher Methode schaff ich es?

 

[Maik]

Ich habe versucht, dass das Submenü nicht unterhalb der Oberpunkte angezeigt wird, sondern rechts davon:

Test1
Test2 Test2 1
Test3 Test2 2

Die Maus befindet sich über dem fetten Test2, rechts ist das Submenü

Nur leider schaffe ich dies nicht. Ich habe bei anderen SUbmenüs geschaut und es z.B. mit "position:absolute" versucht. Aber dies funktionierte auch nicht. Die Submenüpunkte waren bereits an jeder Stelle, aber nicht einmal rechts davon.
Mit welcher Methode schaff ich es?

Suckerfish Dropdowns - Vertical oder A CSS only validating flyout menu - NO javascript.

Welche der beiden Dropdown-Menü-Techniken (Suckerfish vs. Stu Nicholls) ich dir empfehlen soll?

Das mußt du für dich entscheiden, ob du das Menü im IE6 mit oder ohne JS zum Laufen bringen willst

@"csshover3.htc": Den angeblichen Fehler, dass das Menü im IE6 beim Überfahren der Submenüeinträge vorzeitig schliesst, kann ich mit deinen Codeangaben ebenso wenig reproduzieren:



mfg Maik

 

[Superdok]

Na ja wie auch immer, ich werde dann mal auf Stu Nicholls Menüs zurückgreifen, weil ich Menüs ohne Javascript bevorzuge.

Vielleicht könntest du mir auch ma deine Testdateien zuschicken, mit denen es bei dir funktioniert.

Nochmal zum Layout. Wie schaffe ich es, dass das Sumenü rechts neben dem Menü auftaucht?

 

[Maik]

Nochmal zum Layout. Wie schaffe ich es, dass das Sumenü rechts neben dem Menü auftaucht?

Die Frage beantworten dir doch die CSS-Codes meiner beiden zuletzt genannten Links, die ich dir auf deine erste Nachfrage hin nicht aus Jux empfohlen hatte.

Grundsätzlich gilt: Das li-Element der oberen Menüebene wird relativ, und das darin eingebundene ul-Element für die nachfolgende Menüebene entsprechend mit left (= Startposition von links) absolut positioniert.

mfg Maik

 

[Superdok]

So hab nun wieder Zeit gefunden und mich rangesetzt. Hab mich dann doch für die Suckerfish Dropdown Methode entschieden und diese versucht. Funktioniert im FF wie immer super (abgesehen von eienr kleinden Sache - siehe weiter unten), im IE sehe ich allerdings wieder kein Dropdown, obwohl ich mich an die Anleitung gehalten hab und nur ein wenig an der CSS was verändert habe, damit es zu meinem Design passt.

Ein Problem taucht allerdings auch beim FF auf:
Wenn ich über einen Link fahre, der kein Dropdownmenü öffnet, erscheint unter diesem eine gestruchelte Linie, wenn ich aber über einen Link fahre, der ein Drop down Menü öffnet, erscheint die Linie nur, wenn ich mit der Maus über das "Schwarze" der Schrift fahre (beim Fahren mit der Maus von links nach rechts, blinkt also immer wieder eine schwarze Unterlinie auf...)

HINWEIS: Damit du die vollständige Version sehen kannst, Maik, schicke ich dir eine PN mit dem Link.

 

[Maik]

HINWEIS: Damit du die vollständige Version sehen kannst, Maik, schicke ich dir eine PN mit dem Link.

Ich schicke dir hier den Link zu der Homepage, damit du sehen kannst, dass es wirklich nicht funktioniert im IE.

Wie im Thema angesprochen geht im FF außerdem die Unterlinie (beim a:hover) nicht richtig)

Hier ist nichts angekommen :suspekt:

Und warum nennst du den Link nicht einfach hier im Thema?

Andere Benutzer, die hier mitlesen, können sich dann auch dazu äußern.

mfg Maik