Der Z-Index und der Internet Explorer

Du hast um Rat gefragt, und ihn erhalten. Ob er dich befriedigt, war hier nicht Gegenstand der Lösungsfindung.

Das eigentliche Problem kannst du aus dem ersten Absatz im Kapitel zur z-index-Eigenschaft ableiten, der die Gesetzmäßigkeiten der Schichtposition mehrerer aufeinanderfolgenden Elementen umschreibt.

Dort wo bei dir "Box1" für den Verweis "Werbeklassiker" angezeigt werden soll, befinden sich in den Zeilen darunter die <li>-Elementen schon in einer deutlich höheren Schichtposition gegenüber dem allerersten <li>-Element, und gewisse IE-Versionen gewähren dem Kindelement gegenüber seinem unmittelbaren Elternelement keinen höheren z-index-Wert.

Fertitsch.
 
Zuletzt bearbeitet:
Also ist das Problem das, dass der IE dem Kindelement keinen höheren z-index gewährt als das Elternteil besitzt. Ich komm somit nicht über das Elternelement hinaus.

Umständlich aber ok.


Ich habs nun so geöst:

CSS:
Code: 
<style type="text/css">
<!--
    body { padding: 0; margin: 0; text-align: center; } 
    
    
	#navigationWrapper {
        color:      #333;
        font-family:Verdana,Arial,sans-serif;
        font-size:  12px;
        font-weight:bold;
        width:      952px;
        margin:     0px auto 0px;
        position:   relative;
	}
    
    #navigation ul,
    #navigation li {
        padding:    0px;
        margin:     0px;
    }
    
    #navigation ul li {
        position:   relative;     
        list-style: none;
        float:      left;
        width:      190px;
        background: url("/images/navigation/background.png") repeat-x right;
        text-align: center;
    }
    #navigation ul li.navigationLast {
        background: url("/images/navigation/background-last.png");
    }
    #navigation ul li a {
        color:      #fff;
        display:    block;
        padding:    10px 0;
    }
    #navigation ul li.navigationHover {
        background: url("/images/navigation/background-hover.png") repeat-x;
    }
    
    
    
    #navigation a.activ .path {
        /*display: block;*/
        position: absolute;
        width: 100%;
        left: 0px;
        top: 34px;
        background-color: rgb(189, 0, 0);
        z-index: 999;
    }
    
    #subNavigation {
        display:    none;
        position:   absolute;
        height:     500px;
        width:      948px;
        border-left:2px solid #252525;
        border-right:2px solid #252525;
        border-bottom:2px solid #252525;
        /*background: url("/images/navigation/sub-background.png") repeat;*/
        background-color:  #BD0000; 
        margin-top: 136px;
        top: 0px;
        left: 0px;
    }
    
    #subNavigation .subNavigationCategoryContainer {
        display:    none;
        text-align: left;
    }
    
    #subNavigation .subCategories {
        float: left;
        height: 200px;
        border-right: 1px solid #000;
        width: 200px;
    }
    

-->
</style>


<!--[if IE]>
    <style type="text/css">@import url(ie.css);</style>
<![endif]-->

Wobei ie.css

Code: 
#navigation ul li {
        list-style: none;
        width:      190px;
        background: url("/images/navigation/background.png") repeat-x right;
        text-align: center;
        float: left;
        position: static;
    }


Noch ein bisschen JS

Code: 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.js"></script>

<script type="text/javascript">
$(document).ready(function() {

    var rowHeight = {
        'firstRow': '102px',
        'secondRow':    '68px',
        'thirdRow':    '34px'
    }


    $("#navigation ul li").hover(function(){
        //Position des LI Elements
        var position = $(this).position();
        //alert("left: " + position.left + ", top: " + position.top)
        
        //Rest
        $('div.subNavigationCategoryContainer').css("display", "none");
        $('#navigation ul li a').removeClass('activ');
        $('#navigation ul li').removeClass('navigationHover');
        
        //Hovereffekt
        $(this).addClass('navigationHover');
        
        //HTML 5 Data "row" für spätere Anzeige der Kategorie
        var row = $(this).data('row');
        
        //Das SPAN path Element
        $pathObj = $('a',this).addClass('activ').find('span.path')
        
        // Browserweiche IE und Andere
        if($.browser.msie){
            $pathObj.css(
            {
                'position': 'absolute',
                'height': rowHeight[row],
                'left': position.left+'px',
                'top': (position.top+34)+'px'
            });
        }else{
            $pathObj.css(
            {
                'position': 'absolute',
                'height': rowHeight[row]
            });
        }
                    
        //Zeige Subnavi
        $('#subNavigation').css("display", "block");
         
        //Zeige Subcategorien in der Subnavi
        var catID = $(this).data('catID');
        $('#category_'+catID).css("display", "block");
         
    },
    function(){
        //$('a', this).removeClass('activ');
    });
    

    $('#navigationWrapper').mouseleave(function() {
        $('#subNavigation').css("display", "none");
        $('#navigation ul li a').removeClass('activ');
        $('#navigation ul li').removeClass('navigationHover');
    });


});	
</script>


HTML
Code: 
<div id="navigationWrapper">

    <div id="navigation">
        <ul style="position: relative;">
            <li data-catid="362" data-row="firstRow" class="">
                            <a title="Auto &amp; Reisen" href="#">
                                <span class="path"></span>
                                <span>Auto &amp; Reisen</span>
                            </a>
                    </li><li data-catid="172" data-row="firstRow" class="">
                            <a title="Brauereien" href="#">
                                <span class="path"></span>
                                <span>Brauereien</span>
                            </a>
                    </li><li data-catid="364" data-row="firstRow" class="">
                            <a title="Büro &amp; Office" href="#">
                                <span class="path"></span>
                                <span>Büro &amp; Office</span>
                            </a>
                    </li><li data-catid="356" data-row="firstRow" class="">
                            <a title="Computerartikel" href="#">
                                <span class="path"></span>
                                <span>Computerartikel</span>
                            </a>
                    </li><li data-catid="352" data-row="firstRow" class="navigationLast">
                            <a title="Eco &amp; Energiesparen" href="#">
                                <span class="path"></span>
                                <span>Eco &amp; Energiesparen</span>
                            </a>
                    </li><li data-catid="359" data-row="secondRow" class="">
                            <a title="Indoor" href="#">
                                <span class="path"></span>
                                <span>Indoor</span>
                            </a>
                    </li><li data-catid="357" data-row="secondRow" class="">
                            <a title="Markenartikel" href="#" class="">
                                <span class="path" style="position: absolute; height: 68px;"></span>
                                <span>Markenartikel</span>
                            </a>
                    </li><li data-catid="363" data-row="secondRow" class="">
                            <a title="Outdoor" href="#">
                                <span class="path"></span>
                                <span>Outdoor</span>
                            </a>
                    </li><li data-catid="361" data-row="secondRow" class="">
                            <a title="Sport-&amp; Fanartikel" href="#">
                                <span class="path"></span>
                                <span>Sport-&amp; Fanartikel</span>
                            </a>
                    </li><li data-catid="350" data-row="secondRow" class="navigationLast">
                            <a title="Swiss Made" href="#">
                                <span class="path"></span>
                                <span>Swiss Made</span>
                            </a>
                    </li><li data-catid="321" data-row="thirdRow" class="">
                            <a title="Swissness" href="#" class="">
                                <span class="path" style="position: absolute; height: 34px;"></span>
                                <span>Swissness</span>
                            </a>
                    </li><li data-catid="360" data-row="thirdRow" class="">
                            <a title="Taschen &amp; Rucksäcke" href="#" class="">
                                <span class="path" style="position: absolute; height: 34px;"></span>
                                <span>Taschen &amp; Rucksäcke</span>
                            </a>
                    </li><li data-catid="358" data-row="thirdRow" class="">
                            <a title="Textilien" href="#">
                                <span class="path"></span>
                                <span>Textilien</span>
                            </a>
                    </li><li data-catid="355" data-row="thirdRow" class="">
                            <a title="Uhren &amp; Wetter" href="#">
                                <span class="path"></span>
                                <span>Uhren &amp; Wetter</span>
                            </a>
                    </li><li data-catid="351" data-row="thirdRow" class="navigationLast">
                            <a title="Wellness &amp; Kosmetik" href="#">
                                <span class="path"></span>
                                <span>Wellness &amp; Kosmetik</span>
                            </a>
                    </li><li data-catid="353" data-row="" class="">
                            <a title="Werbeklassiker" href="#" class="">
                                <span class="path" style="position: absolute;"></span>
                                <span>Werbeklassiker</span>
                            </a>
                    </li><li data-catid="365" data-row="" class="">
                            <a title="Testkategorie 1" href="#">
                                <span class="path"></span>
                                <span>Testkategorie 1</span>
                            </a>
                    </li>        </ul>    
    </div>
    
    <div id="subNavigation" style="display: none;">
    
        <div id="category_362" class="subNavigationCategoryContainer" style="display: none;"><div class="subCategories"><h3>Autozubehör</h3><ul><li>Eiskratzer</li><li>Erste Hilfe</li><li>Parkscheibe</li><li>Sonnenblende</li></ul></div><div class="subCategories"><h3>Reisen</h3><ul><li>Diverse Reiseartikel</li><li>Kofferanhänger</li><li>Manikürset</li><li>Reisespiele</li><li>Reisetaschen</li><li>Reisewecker</li><li>Toilettenbag</li></ul></div></div><div id="category_172" class="subNavigationCategoryContainer" style="display: none;"><div class="subCategories"><h3>Aufblasbare Artikel</h3><ul></ul></div><div class="subCategories"><h3>Bierdeckelhalter</h3><ul></ul></div><div class="subCategories"><h3>Diverse Artikel</h3><ul></ul></div><div class="subCategories"><h3>Flaschenhalter</h3><ul></ul></div><div class="subCategories"><h3>Flaschenöffner</h3><ul></ul></div><div class="subCategories"><h3>Kugelschreiber Extra</h3><ul></ul></div><div class="subCategories"><h3>Kühltaschen</h3><ul></ul></div><div class="subCategories"><h3>Mini-Truck's</h3><ul></ul></div><div class="subCategories"><h3>Taschen Offset</h3><ul></ul></div><div class="subCategories"><h3>Untersetzer aus Blech</h3><ul></ul></div><div class="subCategories"><h3>Würfelspiele</h3><ul></ul></div></div><div id="category_364" class="subNavigationCategoryContainer" style="display: none;"><div class="subCategories"><h3>Büro</h3><ul><li>Haftis</li><li>Magnete</li><li>Schreibboard</li></ul></div><div class="subCategories"><h3>Handyhalter</h3><ul></ul></div><div class="subCategories"><h3>Pharma</h3><ul></ul></div><div class="subCategories"><h3>Pins</h3><ul></ul></div><div class="subCategories"><h3>Schreibmappen</h3><ul></ul></div><div class="subCategories"><h3>Süsse Werbung</h3><ul></ul></div><div class="subCategories"><h3>Taschenrechner</h3><ul></ul></div></div><div id="category_356" class="subNavigationCategoryContainer" style="display: none;"><div class="subCategories"><h3>CD-Halter + Box</h3><ul></ul></div><div class="subCategories"><h3>Digitale Bilderrahmen</h3><ul></ul></div><div class="subCategories"><h3>Laserpointer</h3><ul></ul></div><div class="subCategories"><h3>MP3 + MP4 Player</h3><ul></ul></div><div class="subCategories"><h3>USB Diverse</h3><ul></ul></div><div class="subCategories"><h3>USB Stick</h3><ul></ul></div></div><div id="category_352" class="subNavigationCategoryContainer" style="display: none;"><div class="subCategories"><h3>Energie</h3><ul></ul></div><div class="subCategories"><h3>Holz Oeko Umwelt</h3><ul></ul></div><div class="subCategories"><h3>Werben + Wachsen (Pflanzen)</h3><ul></ul></div></div><div id="category_359" class="subNavigationCategoryContainer" style="display: none;"><div class="subCategories"><h3>Haushalt</h3><ul><li>Barzubehör</li><li>Frischhalteboxen</li></ul></div><div class="subCategories"><h3>Lampen + Licht</h3><ul></ul></div><div class="subCategories"><h3>Logo-Toaster</h3><ul></ul></div><div class="subCategories"><h3>Radios</h3><ul></ul></div><div class="subCategories"><h3>Sandwich Maker</h3><ul></ul></div><div class="subCategories"><h3>Spiel + Spass</h3><ul><li>Brettspiele</li><li>Fresbee + Bumerang</li><li>Geduldspiele</li><li>Jojos</li><li>Kartenspiele</li><li>Reisespiele</li></ul></div><div class="subCategories"><h3>Thermosflaschen</h3><ul></ul></div><div class="subCategories"><h3>Wein</h3><ul></ul></div><div class="subCategories"><h3>Werkzeug</h3><ul></ul></div></div><div id="category_357" class="subNavigationCategoryContainer" style="display: block;"><div class="subCategories"><h3>Switcher</h3><ul></ul></div></div><div id="category_363" class="subNavigationCategoryContainer" style="display: none;"><div class="subCategories"><h3>Aufblasbare Artikel</h3><ul></ul></div><div class="subCategories"><h3>Holzliegestuhl &amp; andere</h3><ul><li>Alu Liegestuhl</li><li>Beanbag</li><li>Diverse</li><li>Holzliegestühle</li><li>Regiestühle</li><li>Strandkörbe</li></ul></div><div class="subCategories"><h3>Outdoor</h3><ul><li>Drachen</li><li>Einweg-Camera</li><li>Ferngläser</li><li>Grillen + Picknick</li><li>Kühltaschen</li><li>Strandzelte</li><li>Trinkflaschen</li><li>Wasser + Strand</li></ul></div><div class="subCategories"><h3>Sicherheit</h3><ul></ul></div><div class="subCategories"><h3>Taschenmesser</h3><ul></ul></div></div><div id="category_361" class="subNavigationCategoryContainer" style="display: none;"><div class="subCategories"><h3>Fanartikel Fussball WM 2010</h3><ul></ul></div><div class="subCategories"><h3>Fussballkasten</h3><ul></ul></div><div class="subCategories"><h3>Golf</h3><ul></ul></div><div class="subCategories"><h3>Schlitten und Rodel</h3><ul></ul></div></div><div id="category_350" class="subNavigationCategoryContainer" style="display: none;"><div class="subCategories"><h3>Armbanduhren Swiss Made</h3><ul></ul></div><div class="subCategories"><h3>Taschenmesser Wenger</h3><ul></ul></div></div><div id="category_321" class="subNavigationCategoryContainer" style="display: none;"></div><div id="category_360" class="subNavigationCategoryContainer" style="display: none;"><div class="subCategories"><h3>Einkaufstaschen</h3><ul><li>Baumwolltaschen</li><li>Nylontaschen</li><li>PVC Tragtaschen</li><li>Vliestaschen</li></ul></div><div class="subCategories"><h3>Taschen</h3><ul><li>Bodybag</li><li>Business</li><li>Matchsäcke</li><li>Reisen</li><li>Rucksäcke + Citybag's</li><li>Shopper-Bag's</li><li>Sport + Freizeit</li><li>Taschen im Offsetdruck</li></ul></div></div><div id="category_358" class="subNavigationCategoryContainer" style="display: none;"><div class="subCategories"><h3>Aufnäher</h3><ul></ul></div><div class="subCategories"><h3>Badetücher</h3><ul></ul></div><div class="subCategories"><h3>Caps + Mützen</h3><ul><li>Caps Fernost</li><li>Caps Lager</li><li>Diverse</li><li>Hüte</li><li>Mützen</li></ul></div><div class="subCategories"><h3>Fleece</h3><ul></ul></div><div class="subCategories"><h3>Funktions Lauf-Shirt</h3><ul></ul></div><div class="subCategories"><h3>Funktions-Shirt</h3><ul></ul></div><div class="subCategories"><h3>Jacken</h3><ul></ul></div><div class="subCategories"><h3>Radfahrer-Dress</h3><ul></ul></div><div class="subCategories"><h3>Radfahrer-Hose</h3><ul></ul></div><div class="subCategories"><h3>T-Shirt</h3><ul><li>Fruit of the Loom</li><li>Gildan</li><li>Hanes</li><li>Promodoro</li><li>Switcher</li><li>US Basic</li><li>Whale</li></ul></div></div><div id="category_355" class="subNavigationCategoryContainer" style="display: none;"><div class="subCategories"><h3>Funkuhren</h3><ul></ul></div><div class="subCategories"><h3>Tischuhren</h3><ul></ul></div><div class="subCategories"><h3>Wanduhren</h3><ul></ul></div><div class="subCategories"><h3>Wetterstationen</h3><ul></ul></div></div><div id="category_351" class="subNavigationCategoryContainer" style="display: none;"><div class="subCategories"><h3>Düfte</h3><ul></ul></div><div class="subCategories"><h3>Lipcare</h3><ul></ul></div><div class="subCategories"><h3>Wellness + Fitness</h3><ul></ul></div></div><div id="category_353" class="subNavigationCategoryContainer" style="display: none;"><div class="subCategories"><h3>Feuerzeuge</h3><ul><li>Grill-Feuerzeuge</li><li>Kunststoff-Feuerzeuge</li><li>Marken-Feuerzeuge Kunststoff</li><li>Marken-Feuerzeuge Metal</li><li>Metall-Feuerzeuge</li></ul></div><div class="subCategories"><h3>Kaffeebecher</h3><ul></ul></div><div class="subCategories"><h3>Kalender</h3><ul></ul></div><div class="subCategories"><h3>Kugelschreiber</h3><ul><li>Kugelschreiber Kunststoff</li><li>Kugelschreiber Metall</li></ul></div><div class="subCategories"><h3>Kunststoffbecher</h3><ul></ul></div><div class="subCategories"><h3>Schirme</h3><ul><li>Automathik-Schirme</li><li>Fiberglas-Schirme</li><li>Golf-Schirme</li><li>Holzstock-Schirme</li><li>Knirps-Schirme</li><li>Original Knirps Schirme</li><li>Portier-Schirme</li></ul></div><div class="subCategories"><h3>Schlüsselanhänger</h3><ul><li>Schlüsselanhgänger mit Einkaufsw</li><li>Schlüsselanhänger Kristall</li><li>Schlüsselanhänger Kunststoff</li><li>Schlüsselanhänger Licht</li><li>Schlüsselanhänger Metall</li><li>Schlüsselanhänger Soft</li><li>Schlüsselanhänger-Set</li><li>Schlüsselbänder</li></ul></div><div class="subCategories"><h3>Schreibgeräte</h3><ul><li>Druckbleistifte</li><li>Füllfederhalter</li><li>Kugelschreiber</li><li>Metalkugelschreiber</li><li>Rollerball und Finliner</li><li>Schreibsets</li><li>Textmarker</li><li>Etuis/Verpackung</li></ul></div><div class="subCategories"><h3>Tassen</h3><ul></ul></div><div class="subCategories"><h3>Zündhölzer</h3><ul><li>Zahnstocker</li><li>Zündholzbriefchen</li><li>Zündholzbriefchen Sonderformen</li><li>Zündholzschachteln</li><li>Zündholzschachteln Sonderformen</li></ul></div></div><div id="category_365" class="subNavigationCategoryContainer" style="display: none;"></div>        
    </div>

</div>
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück