Supportnet / Forum / Webseiten/HTML

Hallo, ich habe fuer meine Homepage: http://www.unterpfaffenhofen.de/index2.php# ein horizontales Klappmenü bei dem Link "Veranstaltungen" mit Hilfe von Tutorials und Beispielseiten gebastelt. Es funktioniert auch wunderbar im Firefox nur im IE 6.0 passiert einfach gar nichts. In dem CSS Code ist ja auch ein sog. IE -Fix, aber scheinbar bringt dieser nichts. Hier mal die einzelnen Codeabschnitte: [b]JAVA[/b] [code]<script type="text/javascript"> // JavaScript Document startList = function() { if (document.all&&document.getElementById) { navRoot = document.getElementById("nav"); for (i=0; i<navRoot.childNodes.length; i++) { node = navRoot.childNodes[i]; if (node.nodeName=="LI") { node.onmouseover=function() { this.className+=" over"; } node.onmouseout=function() { this.className=this.className.replace(" over", ""); } } } } } window.onload=startList; </script>[/code] [b]CSS[/b] [code]<style type="text/css"> <!-- body { background-color: #dae7fe; background-image: url(borderline.gif); } ul { margin: 0; padding: 0; list-style: none; width: 181px; /* Width of Menu Items */ border-bottom: 0px; } ul li { position: relative; } li ul { position: absolute; left: 181px; /* Set 1px less than menu width */ top: 0; display: none; } /* Styles for Menu Items */ ul li a { border-left:0px; border-right:0px; border-top:0px; display: block; border-bottom: 0px none; } /* Fix IE. Hide from IE Mac \*/ * html ul li { float: left; height: 1%; } * html ul li a { height: 1%; } /* End */ ul li a:hover { color: #E2144A; background: #f9f9f9; } /* Hover Styles */ li ul li a { border-left:1px solid #ccc; border-right:1px solid #ccc; border-top:1px solid #ccc; display: block; text-decoration:none; font-weight:bold; font-family:Arial; font-color:black; color: #777; background: #A1C2FB; /* IE6 Bug */ padding: 5px; border-bottom: 0px none; } /* Sub Menu Styles */ li:hover ul, li.over ul { display: block; } /* The magic */ --> </style>[/code] [b]HTML:[/b] [code] <td> <li><a href="#"><img src="Bilder/index2_10.gif" alt="" width="181" height="42" border="0"></a><ul> <li><a href="#">Seefest</a></li> <li><a href="#">Maibaum</a></li> <li><a href="#">Vorsilfesterparty</a></li> </ul> </li></td>[/code] Hoffe jemand kennt sich damit aus und kann mir etwas vorschlagen. Oder ist dieses gar nicht möglich in IE 6.0? Danke aufjedenfall schonmal MFG Mauki

der IE mag es meines Wissens nicht, wenn die Liste der Klassen in einem Element mit einem Leerzeichen beginnt (was bei +=" klasse" passieren kann).

übrigens lässt sich deine JavaScript-Funktion deutlich abkürzen:

startList = function() {
 if (document.getElementById) {
  var navRoot = document.getElementById("nav");
  var linodes = navRoot.getElementsByTagName("li");
  for (var j=0; j<linodes.length; j++) {
   linodes[j].onmouseover=function() {
    this.className+=" over";
   }
   linodes[j].onmouseout=function() {
    this.className=this.className.replace(" over", "");
   }
  }
 }
}

Wozu hast du übrigens nach document.all gefragt? Das benutzt dein Script doch gar nicht (und wenn wäre es töricht).
Es ist übrigens sinnvoller, neue Variablen mit var einzuführen, ohne das würdest du zum Beispiel in der For-Schleife den Indexzähler j nicht nur hier, sondern auch in allen anderen Funktionen und sonstwo im JavaScript ändern. Globale Variablen sind immer gefährlich!

Danke,

habe deine Tips umgesetzt. Wie gesagt, ich habe das durch Tutorials usw. umgesetzt und habe selber wenig Ahnung von Javascript.
Leider funktioniert es in IE 6.0 immer noch nicht.
Meine Javacode sieht nun so aus:

startList = function() {
if (document.getElementById) {
var navRoot = document.getElementById("nav");
var linodes = navRoot.getElementsByTagName("li");
for (var j=0; j<linodes.length; j++) {
linodes[j].onmouseover=function() {
this.className+="over";
}
linodes[j].onmouseout=function() {
this.className=this.className.replace("over", "");
}
}
}
}

die eigenwillige Syntax fällt mir erst jetzt auf:

startList = function()

probier mal das übliche:

function startList ()

Ob der IE6 nämlich eine Funktion als globale Variable akzeptiert entzieht sich meiner Kenntnis.


PS: mit deinen Änderungen kannst du

this.className=this.className.replace("over", "");

kürzer schreiben als

this.className="";

Geht leider mit den Änderungen immer noch nicht :(

MFG

lies bitte nochmals genau Antwort 3 und vergleiche das mit deinem Code!

Tipp: der Firefox hat eine prima Fehlerkonsole!

noch'n Tipp: font-color gibt es nicht im CSS

Habe mich verlesen gehabt ich dummerchen.
Jetzt spuckt die Fehler-Konsole nichts mehr aus und ich habe denke ich alle Änderung die du vorgeschlagen hast umgesetzt, aber IE 6.0 nimmt sie leider immer noch nicht an :(

Kann es sein, dass der IE 6 einfach den Teil von CSS nicht interpretieren kann?:

/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */

bzw. einige andere CSS Befehle.

Danke aufjedenfall fuer die große Hilfe schonmal.

• Suche eine neue Maus...
• Horizontales Scrollen durch Zusatztaste?
• CSS Menü im Vordergrund halten