✔ Problem Hover & IE

M

Mathe

Grünschnabel
Hallo!

Ich habe das Problem, dass mein Hover Menü im IE (hab Version 8) nicht funktioniert. Habe die neuster Version der csshover.htc runtergeladen und ins gleiche Verzeichniss wie die HTML gelegt. Aber leider t das nicht! Ist evtl. die Anweisung für den IE falsch?

Hier mein Quellcode der HTML:

Code: 
<html>
        <head>
                <title>Navigation</title>
                <style type="text/css">
                        #menu {height:132px; width:132px; position:relative;}
                        #menu ul {margin:0; padding:0; list-style:none; white-space:nowrap; text-align:left; padding:1px 1px 0 1px; background:#fff;}
                        #menu li {margin:0; padding:0; list-style:none;}
                        #menu li {display:inline-block; display:inline;}
                        #menu ul ul {position:absolute; left:-9999px;}
                        #menu ul#toplevel {position:absolute; left:0; top:0;}
                        #menu a {display:block; font:normal 15px verdana,arial,sans-serif; color:#000; line-height:27px; text-decoration:none;padding:0 20px 0 10px;}
                        #menu ul li:hover > ul {left:100%; margin-top:-23px; margin-left:-1px;}
                        #menu a:hover ul,
                        #menu a:hover a:hover ul
                        #menu a:hover a:hover a:hover ul {left:100%;}
                        #menu a:hover ul ul,
                        #menu a:hover a:hover ul ul {left:-9999px;}
                        #menu li a:hover {background:#09c; color:#fff;}
                        #menu li:hover > a {background:#09c; color:#fff;}
                        #menu li a.fly {background: url(anywidth/arrow.gif) no-repeat right top;}
                        #menu li a.fly:hover {background:#09c url(anywidth/arrow.gif) no-repeat right top;}
                        #menu li:hover > a.fly {background:#09c url(anywidth/arrow.gif) no-repeat right top;}
                        #menu table {position:absolute; left:100%; height:0; width:0; border-collapse:collapse; margin-top:-7px; margin-left:-1px;}
                 </style>
                 <!--[if IE]>
                 <style type="text/css">
                 body {behavior: url("csshover.htc"); }
                 </style>
                 <![endif]-->


        <base target="hauptseite">
        </head>
        <body>
                <br><br>
                <div id="menu">
                        <ul id="toplevel">
                                <li><a href="mainpage.html">Home</a>
                                <li><a class="fly" href="geraete.html">Geräte ></a>
                                        <ul>
                                                <li><a href="boxen.html">Boxen</a></li>
                                                <li><a href="verstaerker.html">Verstärker</a></li>
                                                <li><a href="mischpulte.html">Mischpulte</a></li>
                                                <li><a href="licht.html">Lichtequipment</a></li>
                                                <li><a href="mikrofone.html">Mikrofone</a></li>
                                                <li><a href="zubehoer.html">Zubehör</a></li>
                                        </ul>
                                </li>
                                <!---<li><a class="fly" href="fotos.html">Fotos ></a>
                                        <ul>
                                                <li><a href="aufbau.html">Scheuren 05.07.2009</a></li>
                                        </ul>
                                </li>   --->
                                <li><a class="fly" href="referenzen.html">Referenzen ></a>
                                        <ul>
                                                <li><a href="aufbau.html">Notausgang Unkel</a></li>
                                                <li><a href="aufbau.html">Grillhütte Unkel</a></li>
                                                <li><a href="http://www.jgv-unkel.de/" target="_blank">JGV Unkel</a></li>
                                                <!---<li><a href="http://www.kj-unkel.de/" target="_blank">KJU</a></li>--->
                                        </ul>
                                </li>
                                <li><a class="fly" href="kontakt.php">Kontakt</a></li>
                        </ul>
                </div>
        </body>
</html>

Danke!
 
Hi,

wenn das HTML-Dokument mit einer entsprechenden Doctype-Deklaration den Browsern im standardkonformen Modus übergeben wird, funktioniert das Menü im IE7 und IE8.

Im derzeitigen "Quirksmode" verhalten sie sich, wie ihre Vorgängerversionen, die den Selektor li:hover nicht interpretieren.

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
        <head>
                <title>Navigation</title>
                <style type="text/css">
                        #menu {height:132px; width:132px; position:relative;}
                        #menu ul {margin:0; padding:0; list-style:none; white-space:nowrap; text-align:left; padding:1px 1px 0 1px; 

background:#fff;}
                        #menu li {margin:0; padding:0; list-style:none;}
                        #menu li {display:inline-block; display:inline;}
                        #menu ul ul {position:absolute; left:-9999px;}
                        #menu ul#toplevel {position:absolute; left:0; top:0;}
                        #menu a {display:block; font:normal 15px verdana,arial,sans-serif; color:#000; line-height:27px; 

text-decoration:none;padding:0 20px 0 10px;}
                        #menu ul li:hover > ul {left:100%; margin-top:-23px; margin-left:-1px;}
                        #menu a:hover ul,
                        #menu a:hover a:hover ul
                        #menu a:hover a:hover a:hover ul {left:100%;}
                        #menu a:hover ul ul,
                        #menu a:hover a:hover ul ul {left:-9999px;}
                        #menu li a:hover {background:#09c; color:#fff;}
                        #menu li:hover > a {background:#09c; color:#fff;}
                        #menu li a.fly {background: url(anywidth/arrow.gif) no-repeat right top;}
                        #menu li a.fly:hover {background:#09c url(anywidth/arrow.gif) no-repeat right top;}
                        #menu li:hover > a.fly {background:#09c url(anywidth/arrow.gif) no-repeat right top;}
                        #menu table {position:absolute; left:100%; height:0; width:0; border-collapse:collapse; margin-top:-7px; 

margin-left:-1px;}
                 </style>
                 <!--[if IE]>
                 <style type="text/css">
                 body {behavior: url("csshover.htc"); }
                 </style>
                 <![endif]-->


        <base target="hauptseite">
        </head>
        <body>
                <br><br>
                <div id="menu">
                        <ul id="toplevel">
                                <li><a href="mainpage.html">Home</a>
                                <li><a class="fly" href="geraete.html">Geräte ></a>
                                        <ul>
                                                <li><a href="boxen.html">Boxen</a></li>
                                                <li><a href="verstaerker.html">Verstärker</a></li>
                                                <li><a href="mischpulte.html">Mischpulte</a></li>
                                                <li><a href="licht.html">Lichtequipment</a></li>
                                                <li><a href="mikrofone.html">Mikrofone</a></li>
                                                <li><a href="zubehoer.html">Zubehör</a></li>
                                        </ul>
                                </li>
                                <!---<li><a class="fly" href="fotos.html">Fotos ></a>
                                        <ul>
                                                <li><a href="aufbau.html">Scheuren 05.07.2009</a></li>
                                        </ul>
                                </li>   --->
                                <li><a class="fly" href="referenzen.html">Referenzen ></a>
                                        <ul>
                                                <li><a href="aufbau.html">Notausgang Unkel</a></li>
                                                <li><a href="aufbau.html">Grillhütte Unkel</a></li>
                                                <li><a href="http://www.jgv-unkel.de/" target="_blank">JGV Unkel</a></li>
                                                <!---<li><a href="http://www.kj-unkel.de/" target="_blank">KJU</a></li>--->
                                        </ul>
                                </li>
                                <li><a class="fly" href="kontakt.php">Kontakt</a></li>
                        </ul>
                </div>
        </body>
</html>


mfg Maik
 
Sorry, bin recht neu auf dem Gebiet, was versteht man den unter Standardkonformen Modus?

edit: Das was oben am Anfang steht?

tatsächlich, dann klappst! Was sagt das oben denn genau aus?
 
ah supi, danke! Im IE6 hovert es allerdings immernoch nicht. Wobei ich gar nicht weiß, ob der noch Benutzt wird, bin selber FF Nutzer.
 
Mitunter taucht der IE6 hin und wieder schon noch auf.

Du kannst da aber anstelle des "csshover.htc"-Hacks ganz bequem auf ie7-js zurückgreifen.

HTML: 
<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script>
<![endif]-->


Netter Nebeneffekt: Mit diesem Script werden weitere altbekannte Bugs und Mangelerscheinungen im IE6 gefixt - siehe hierzu http://ie7-js.googlecode.com/svn/test/index.html.

mfg Maik
 
Hi,
ich darf mich hiermal einbinden :) .
Ich habe jetzt diese htc Dateien schon zwei dreimal gesehen und auch schon mal was darüber gelesen aber so ganz hat sich mir der Sinn dieser noch nicht ganz erschlossen?

Gruß
 
Hi Dirty,

ja, du darfst :)

Der Sinn dieses, wie auch anderen Scripts (wie z.B. http://www.htmldog.com/articles/suckerfish/dropdowns/) liegt einfach darin, die fehlende Interpretation der :hover-Pseudoklasse bei allen verfügbaren HTML-Elementen von seitens des IE6 (und älter) zu korrigieren.

Dieser unterstützt in dieser Elementliste nämlich ausschließlich a:hover. Im eingangs vorgestellten Flyout-Menü kommt aber li:hover zum Einsatz, um die Submenüs einzublenden.

Wenn du im Besitz des IE6 bist, kannst du ihm mal diese Seite zeigen: "http://ie7-js.googlecode.com/svn/test/hover.html?ie7_off" :-)

Dieses, wie auch andere seiner Mankos wurden seinerzeit mit dem IE7-Release aus der Welt geräumt (solange er und der aktuelle IE8 nicht im "Quirksmode" laufen).

mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück