Axel Richter: z-index & Internet Explorer

Beitrag lesen

SELF-Forum

z-index & Internet Explorer

Axel Richter
– Informationen zu den Bewertungsregeln

Hallo,

hier erstmal der Link zum Problem:
http://www.newmusicschool-nea.de/index.html
Auf dieser Seite habe ich ein Menü mit Submenü bei Mouseover etc. eingebaut.
Funktioniert soweit auch alles wunderbar mit Firefox, Opera etc...

Naja "wunderbar" ist was Anderes. Bitte schau mal in die JavaScript-Konsole des FireFox.

Nur ein Problem habe ich beim Internet Explorer, hier werden nämlich die Submenüs im Hintergrund geöffnet, nur verstehe ich nicht warum...

Erfahrungswert: Wenn man mit z-index herumexperimentieren muss, stimmt irgendwas am Gesamtkonzept nicht.

Durch Dein schon sehr komplexes Design wird sich keiner durchbeißen, aber versuche mal auf dem Folgenden aufzubauen.

  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  
        "http://www.w3.org/TR/html4/strict.dtd">  
<html>  
<head>  
<title>Vertikale überlappende popup-Navigation</title>  
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">  
<style type="text/css">  
<!--  
#navi {list-style-type:none; margin:0; padding:0; width:200px;}  
#navi li ul {list-style-type:none; display:none; margin:0; padding:0; width:200px;}  
  
#navi li {margin:0; padding:2px; background-color:#CFCFCF; float:left; width:100%;}  
#navi li ul li {background-color:#00AFAF;}  
  
#navi li:hover {position:relative;}  
#navi li:hover ul {display:block; position:absolute; top:1em; left:5ex;}  
  
#navi a {display:block; width:100%; text-decoration:none;}  
#navi a:link, #navi a:visited, #navi a:active, #navi a:focus {color:#000000; background-color:transparent;}  
  
#navi li a:hover {color:#800000; background-color:#EFEFEF;}  
#navi li ul li a:hover {color:#800000; background-color:#00FFAF}  
-->  
</style>  
<!--[if IE]><script type="text/javascript">  
function init() {  
  var naviUL = document.getElementById("navi");  
  var naviULlis = naviUL.getElementsByTagName("li");  
  for (var i = 0; i < naviULlis.length; i++) {  
     if(naviULlis[i].parentNode==naviUL) {  
       naviULlis[i].onmouseover=einblenden;  
       naviULlis[i].onmouseout=ausblenden;  
     }  
  }  
}  
function einblenden(){  
  this.style.position="relative";  
  var nestedUL = this.getElementsByTagName("ul")[0];  
  if (nestedUL) {  
     nestedUL.style.display="block";  
     nestedUL.style.position="absolute";  
     nestedUL.style.top="1em";  
     nestedUL.style.left="5ex";  
  }  
}  
function ausblenden(){  
  this.style.position="static";  
  var nestedUL = this.getElementsByTagName("ul")[0];  
  if (nestedUL) {  
     nestedUL.style.display="none";  
     nestedUL.style.position="static";  
  }  
}  
  
if (document.getElementById && document.getElementsByTagName) {  
  window.onload=init;  
}  
</script><![endif]-->  
</head>  
<body>  
<ul id="navi">  
 <li><a href="#">Hauptmenüpunkt1</a>  
  <ul>  
   <li><a href="#">Untermenüpunkt1.1</a></li>  
   <li><a href="#">Untermenüpunkt1.2</a></li>  
  </ul>  
 </li>  
 <li><a href="#">Hauptmenüpunkt2</a>  
  <ul>  
   <li><a href="#">Untermenüpunkt2.1</a></li>  
   <li><a href="#">Untermenüpunkt2.2</a></li>  
   <li><a href="#">Untermenüpunkt2.3</a></li>  
  </ul>  
 </li>  
 <li><a href="#">Hauptmenüpunkt3</a></li>  
 <li><a href="#">Hauptmenüpunkt4</a>  
  <ul>  
   <li><a href="#">Untermenüpunkt4.1</a></li>  
   <li><a href="#">Untermenüpunkt4.2</a></li>  
  </ul>  
 </li>  
</ul>  
</body>  
</html>

Das ist getestet in IE6.0, FF1.0.7 und Opera8.5 jeweils unter Windows.

viele Grüße

Axel

Beitrag melden
–
Informationen zu den Bewertungsregeln