Layering Problem mit jQuery Akkordeon und IE7

Question

Ich habe ein seltsames Problem mit der jQuery Akkordeon-Plugin und IE7 (und früher vielleicht hat es nicht getestet). Ich verwende ein benutzerdefiniertes jQuery UI-Thema mit Themeroller gebaut. Ich habe es gezwickt einige Farben, Ränder und Grenzen anzupassen. Das Akkordeon ist in einem DIV befindet, der wiederum ist, in meinem Hauptinhalt verschachtelt. Vereinfachte Marke und CSS ist unten. Im Grunde genommen ist der Inhalt eine zentrierte Box von Grenzen umgeben ist. Das Menü ist unter dem oberen Teil des Kastens versetzt und schwebt über den linken Rand.

Das Problem ist, dass in IE7 einmal hatte ich schweben über das Menü, die Grenzen von der darunterliegenden main DIV Show durch das Akkordeon. Dies geschieht nicht in FF oder Safari. Die Frage ist, warum, da das Standard-Akkordeon CSS einen Z-Index von 1 setzt? Sollten nicht alle diese Elemente angezeigt werden über die Oberseite der DOM-Elemente hinter ihnen? Und warum nur auf schweben?

Ich habe dieses Problem bereits gelöst und die Lösung als Antwort senden.

<div id="main" style="position: relative;">
    <div id="main-menu">
        <ul id="navigation" class="ui-accordion">
            <li>
                <div class="ui-accordion-header">
                </div>
                <div class="ui-accordion-content">
                </div>
            </li>
        </ul>
    </div>
</div>

CSS

#main
{
    clear: both;
    padding: 30px 30px 30px 30px;
    background-color: #fff;
    border: solid 1px #669933;
    margin-bottom: 30px;
    min-height: 500px;
    height: auto !important;
    height: 500px;
    _height: 1px; /* only IE6 applies CSS properties starting with an underscrore */
}
#main-menu
{
    position: absolute;
    top: 1em;
    left: -1em;
}

#navigation
{
    width: 10em;
}

/*UI accordion*/
.ui-accordion {
    /*resets*/margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.5; text-decoration: none; font-size: 100%; list-style: none;
    font-family: Verdana, Arial, sans-serif;
    font-size: 1.1em;
/* additions from default */
    background-color: #ffffff;
    color: #333333;
    border: solid 1px #336600;
    text-indent: 0.2em;
    z-index: 1;
}

Answer 1

explizit Nach dem Versuch, auf den verschiedenen .ui-Akkordeon Klassen einen Z-Index zu setzen, habe ich beschlossen, eine Ebene zu sichern. Es stellt sich heraus, dass ein z-Index-Einstellung (von 1) auf der main-menu DIV das Problem in IE7 löst. Beachten Sie, dass der Z-Index auf der Haupt .ui-Akkordeon-Klasse immer da war. Die Anwendung der ui-Akkordeon-Klasse zum main-menu div bricht das Layout und ich dachte, war es einfacher, den Z-Index auf das Hauptmenü einfach hinzufügen, auch, anstatt zu versuchen, es so restyle, die mit der ui-Akkordeon-Klasse arbeitet angewandt .