Michael: z-index & Internet Explorer

SELF-Forum

z-index & Internet Explorer

Michael
– Informationen zu den Bewertungsregeln

Hallo Leute,

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...

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

z-index habe ich gesetzt, aber mit dem Internet Explorer funktioniert es trotzdem nicht!

Hier findet ihr übrigens das CSS hierfür:
http://www.newmusicschool-nea.de/style.css

Der Teil für das Menü befindet sich im unteren Teil, hierbei handelt es sich um ein Menü, welches nur aus <ul> und <li>'s besteht.

Vielen Dank schonmal für eure Hilfe!

Gruß Michael

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. z-index & Internet Explorer

    Hopsel
    – Informationen zu den Bewertungsregeln

    Hi Michael!

    Der IE kann :hover nur auf Verweise anwenden.

    Wie immer hilft dir SELFHTML weiter: http://de.selfhtml.org/css/layouts/navigationsleisten.htm#modern

    MfG H☼psel

    --
    "It's amazing I won. I was running against peace, prosperity, and incumbency."
    George W. Bush speaking to Swedish Prime Minister unaware a live television camera was still rolling, June 14, 2001
    Selfcode: ie:% fl:( br:> va:) ls:& fo:) rl:? n4:& ss:| de:] js:| ch:? sh:( mo:) zu:)
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. z-index & Internet Explorer

      Michael
      – Informationen zu den Bewertungsregeln

      Hallo,

      vielen Danke schonmal!

      Die Navigation baut bereits auf diesem Script auf, der Hover funktioniert ja auch bereits im Internet Explorer, nur komischerweise blendet er es hinter der Hauptliste (also mit den Überpunkten) ein...

      Einfach mal ausprobieren, dann wisst ihr was ich meine.

      Aber woran das liegt verstehe ich eben nicht. Mit dem z-index habe ich es auch schon probiert.

      Bin für jeden Vorschlag offen! ;)

      Danke schonmal!

      Gruß Michael

      Hi Michael!

      Der IE kann :hover nur auf Verweise anwenden.

      Wie immer hilft dir SELFHTML weiter: http://de.selfhtml.org/css/layouts/navigationsleisten.htm#modern

      MfG H☼psel

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. z-index & Internet Explorer

        Ingo Turski Homepage des Autors
        – Informationen zu den Bewertungsregeln

        Hi,

        Die Navigation baut bereits auf diesem Script auf

        leider hast Du aber die Hinweise hierzu nicht beachtet. Ohne Javascript sind die Unterpunkte im IE nicht erreichbar. :-(

        freundliche Grüße
        Ingo

        --
        [barrierefreie Webseitenerstellung » Suchmaschinenoptimierung | em?] (Hommingberger Gepardenforelle;-)
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

  2. 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

    1. z-index & Internet Explorer

      Michael
      – Informationen zu den Bewertungsregeln

      <!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>

        
Danke nochmal für deinen Tipp mit dem anderen Script!  
  
Hab das nun verwendet und entsprechend angepasst nun funktioniert soweit alles, zumindest im IE, Firefox und Opera.  
  
Mehr hab ich nicht installiert, reicht aber denk ich auch... ;)  
  
Also danke!  
  
Gruß Michael
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

  3. z-index & Internet Explorer

    Martin Hölter Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Hi!

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

    Kann ich nicht nachvollziehen. Mein IE 6 stellt die Links im Vordergrund dar. Deine Unterseiten scheinen aber ncoh buggy, hab dir mal nen Screenshot zugemailt.

    Gruß aus Iserlohn

    Martin

    --
    Selfcode: ie:{ fl:( br:^ va:) ls:# fo:| rl:( n4:( ss:| de:> js:) ch:? sh:( mo:| zu:)
    Geht zum Weltspartag!
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. z-index & Internet Explorer

      Michael
      – Informationen zu den Bewertungsregeln

      Hi!

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

      Kann ich nicht nachvollziehen. Mein IE 6 stellt die Links im Vordergrund dar. Deine Unterseiten scheinen aber ncoh buggy, hab dir mal nen Screenshot zugemailt.

      Gruß aus Iserlohn

      Martin

      Hallo Martin,

      sollte mitlerweile wieder alles gehen, da war wohl vermutlich gerade noch dein Cache aktiv und ich in dem Moment beim rumprobieren & austauschen...

      Aber danke dir auch nochmal!

      Gruß Michael

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln