z-index im IE

latita

Hallöle
ich benutze für diese Seite (habe sie erstellt) das Plugin DropDownMenue, damit die Unterseiten schön ordentlich dargestellt werden.
Standardmäßig ist dort eine Transparenz voreinstellt ( opacity: 0.88; ) und es werden z-indexe vergeben. Für #dowpdownmenu { z-index: 5; } und für #dropdownmenu ul { z-index: 500;}

Nun will ich aber keine Transparenz, weil das Hauptmenu mehrzeilig ist, und dadurch das Auswählen der Unterseiten erschwert wird. Dazu hab ich den opacity-Teil auskommentiert und statt dem z-index: 500 den z-index: 4 vergeben.
Im Firefox wird das nun auch wie gewünscht dargestellt: Die Unterseiten überlagern den Rest der Menüleiste beim Aufklappen. Nur der InternetExplorer (7) tut das nicht.
Nun weiß ich aus eigener Erfahrung, dass der IE den z-index gar nicht beachtet. Wie sag ich dem jetzt, dass das Aufgeklappte gefälligst anderes überdeckt?

Wenn noch Informationen fehlen, fühlt euch frei mir das mitzuteilen :)

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

marX

Zitat von latita

Nun weiß ich aus eigener Erfahrung, dass der IE den z-index gar nicht beachtet. Wie sag ich dem jetzt, dass das Aufgeklappte gefälligst anderes überdeckt?

Bitte was? IE kennt den z-index seit Version 4.
SELFHTML: Stylesheets / CSS-Eigenschaften / Positionierung und Anzeige von Elementen
z-index gilt aber nur für positionierte Elemente. Eventuell tut's schon ein position:relative.

latita

Das mag sein... Dann eine Entschuldigung an den IE :) Jedenfalls haben auch eigene Versuche mit dem z-index im Rahmen eines Templates für Wordpress nicht geklappt.

Leider bringt dein Vorschlag auch nicht den gewünschten Erfolg :( (vorher postition:absolute bei #dropdownmenu ul)

marX

Ich würde mir deine Seite ja mal angucken, aber der Link oben geht nicht. :-(

latita

oh sorry noch mal... habe es geändert. der link geht nun

marX

Ich denke nicht dass es am z-index liegt. Möglicherweise handelt es sich hier um den "Disappearing List Background"-Bug des IE (auch wenn ich dachte dass der in Version 7 behoben wurde...). Zumindest wär das mal ein Ansatz.

Was ich nicht verstehe: Das Menü hat einen z-index von 5, die Menülisten von 4. Vielleicht solltest du auch mal den Unterlisten (#dropdownmenu ul ul) mal einen noch höheren z-index geben.

latita

Ich kriegs nicht hin ... :cry:
Darum möchte ich hier mal die gesamte Stylesheetdatei posten, vielleicht findet ihr ja die Lösung.
Überall wo z-index: 3 steht, das ist hab ich hinzugefügt.

HTML

#dropdownmenu {
    display: block;
    border: 0px;
    padding: 0px 0px 0px 0px;
    margin:  0px 0px 0px 0px;
    z-index: 5;
    position: relative;
}
 
#dropdownmenu ul {
    width: 100%;
    list-style-type: none;
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 2px 0px;
    z-index: 4;
    position: relative;
    bottom: 0;
    left: 20px;
}
 
#dropdownmenu li {
    display: inline;
    float: left;
    position: relative;
    z-index:3;
    text-align: left;
    padding: 5px 16px 5px;
    margin: 0px 0px 0px 0px;
}
 
#dropdownmenu h2 {
    font-size: 1.2em;
    padding: 0;
    margin: 0;
    font-weight: bold;
}
 
#dropdownmenu li ul {
    width: 150px;
    height: auto;
    top: 100%;
    left: 0px;
}
 
#dropdownmenu li.LargeMenu ul {
    width: 180px;
    height: auto;
    top: 100%;
    left: 0px;
}
 
#dropdownmenu li ul li {
    text-align: left;
    width: 118px;    
    height: auto;
    min-height: auto;
    display: block;
}
 
#dropdownmenu li.LargeMenu ul li {
    text-align: left;
    width: 148px;    
    height: auto;
    min-height: auto;
    display: block;
}
 
#dropdownmenu a {
    text-decoration: none;
}
 
#dropdownmenu li li ul {
    top: 0;
    left: 0;
}
 
#dropdownmenu li li:hover ul {
    left: 150px;
}
 
/* initialy hide all sub sidemenus */
#dropdownmenu ul ul,
#dropdownmenu ul li:hover ul ul,
#dropdownmenu ul ul li:hover ul ul,
#dropdownmenu ul ul ul li:hover ul ul,
#dropdownmenu ul ul ul ul li:hover ul ul {
    display: none;
    position: absolute;
    z-index: 3;
}
 
/* display them on hover */
#dropdownmenu li:hover ul,
#dropdownmenu ul li:hover ul,
#dropdownmenu ul ul li:hover ul,
#dropdownmenu ul ul ul li:hover ul,
#dropdownmenu ul ul ul ul li:hover ul,
#dropdownmenu ul ul ul ul ul li:hover ul {
      display: block;
      z-index: 3;
}
 
#dropdownmenu #PhpWebcontent {
    display:none;
}    
 
/* define the consecutive colors */
 
#dropdownmenu {
    color: #FFFFFF;
}
 
/*#dropdownmenu ul{
    -moz-opacity:0.88; /* for mozilla *
    opacity: 0.88; /* for safari *
    khtml-opacity: 0.88 
        /* for konquerer and older safari *
}*/
 
#dropdownmenu ul ul {
}
 
#dropdownmenu ul li {
}
 
#dropdownmenu h2 {
    color: #FFFFFF;
}
 
#dropdownmenu a {
    color: #FFFFFF;
    }
 
#dropdownmenu ul li:hover {
}
 
#dropdownmenu ul li ul {
 
}
 
#dropdownmenu ul li ul li {
    background: #B2D60E;
}
 
#dropdownmenu ul li ul li:hover {
    background: #B2D60E;
}
 
#dropdownmenu ul li ul ul li{
    background: #B2D60E; /*#4c7d12;*/
    color: #ffffff;
}
 
#dropdownmenu ul li ul ul li:hover {
    background: #B2D60E;
}

Alles anzeigen

codestyling

Hi,

bitte bring erstmal den Header deiner Templates in Ordnung, damit man davon ausgehen kann, das der Browser auch macht (machen kann) was er soll:

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="de-DE">


<head profile="http://gmpg.org/xfn/11">


   <!--script type=�text/javascript�><!�//�><![CDATA[//><!�


    sfHover = function() {
    var sfEls = document.getElementById(�nav�).getElementsByTagName(�LI�);
    for (var i=0; i<sfEls.length; i++) {
    sfEls[i].onmouseover=function() {
    this.className+=� sfhover�;
    }
    sfEls[i].onmouseout=function() {
    this.className=this.className.replace(new RegExp(� sfhover\\b�), ��);
    }
    }
    }
    if (window.attachEvent) window.attachEvent(�onload�, sfHover);


    //�><!]]></script-->


<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

Alles anzeigen

latita

codestyling Eigentlich hatte ich das ja ausgeklammert (stammte von einem anderen Skript), habe es aber jetzt gelöscht.

Verändert hat sich nichts, aber vielleicht hast du/habt ihr ja noch eine weitere Idee?

marX auf der von die verlinkten Seite wurde vorgeschlagen mal überall ein position:relative zu setzen, danach verschwanden die Dropboxen sonst wo und waren nicht mehr auswählbar :) Sie überlappten bzw. unterlappten sich dann zwar nicht mehr :mrgreen: aber geht ja nicht

marX

Hast du mal an den z-index-Werten gedreht, wie ich oben vorgeschlagen habe? Die inneren Listen haben einen niedrigeren Wert als die äußeren. Das erscheint mir merkwürdig.

Willkommen! Melden Sie sich an oder registrieren Sie sich.

z-index im IE

Jetzt mitmachen!