Der Z-Index und der Internet Explorer

N

ne0hype

Erfahrenes Mitglied
Hallo Community,

ich bin ratlos !

Folgendes Problem tritt im Internet Explorer auf:

Ich habe eine Liste die "gefloatet" ist. Nun möchte ich ein <span> Objekt, das in einem <li> Eingebunden ist über die anderen Listen darüberlegen.

Ich denke anhand eines Beispiel wird es deutlicher.

CSS:
Code: 
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;
	}
    
    #navigation ul,
    #navigation li {
        position:   relative;
        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:hover {
        background: url("/images/navigation/background-hover.png") repeat-x;
    }
    
    
    
    #subNavigation {
        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;
        margin-top: 136px;
    }
     
    #navigation a.activ .path {
        display: block;
        position: absolute;
        height: 100px;
        width: 100%;
        left: 0px;
        top: 34px;
        background-color: rgb(189, 0, 0);
        z-index: 999;
    }

HTML:
Code: 
<div id="navigationWrapper">

    <div id="navigation">
        <ul>
            <li data-catid="353" class="navigationLast">
                            <a title="Werbeklassiker" href="/werbeklassiker-c-353.html" class="">
                                <span class="path"></span>
                                <span>Werbeklassiker</span>
                            </a>
                    </li><li data-catid="172" class="">
                            <a title="Brauereien" href="/brauereien-c-172.html" class="">
                                <span class="path"></span>
                                <span>Brauereien</span>
                            </a>
                    </li><li data-catid="321" class="">
                            <a title="Swissness" href="/swissness-c-321.html" class="">
                                <span class="path"></span>
                                <span>Swissness</span>
                            </a>
                    </li><li data-catid="350" class="">
                            <a title="Swiss Made" href="/swiss-made-c-350.html" class="">
                                <span class="path"></span>
                                <span>Swiss Made</span>
                            </a>
                    </li><li data-catid="351" class="navigationLast">
                            <a title="Wellness &amp; Kosmetik" href="http://www.showtechnik-kleinanzeiger.de/wellness-kosmetik-c-351.html" class="">
                                <span class="path"></span>
                                <span>Wellness &amp; Kosmetik</span>
                            </a>
                    </li><li data-catid="352" class="">
                            <a title="Eco &amp; Energiesparen" href="/eco-energiesparen-c-352.html" class="">
                                <span class="path"></span>
                                <span>Eco &amp; Energiesparen</span>
                            </a>
                    </li><li data-catid="355" class="">
                            <a title="Uhren &amp; Wetter" href="/uhren-wetter-c-355.html">
                                <span class="path"></span>
                                <span>Uhren &amp; Wetter</span>
                            </a>
                    </li><li data-catid="356" class="">
                            <a title="Computerartikel" href="/computerartikel-c-356.html" class="">
                                <span class="path"></span>
                                <span>Computerartikel</span>
                            </a>
                    </li><li data-catid="357" class="navigationLast">
                            <a title="Markenartikel" href="/markenartikel-c-357.html">
                                <span class="path"></span>
                                <span>Markenartikel</span>
                            </a>
                    </li><li data-catid="358" class="">
                            <a title="Textilien" href="/textilien-c-358.html">
                                <span class="path"></span>
                                <span>Textilien</span>
                            </a>
                    </li><li data-catid="359" class="">
                            <a title="Indoor" href="/indoor-c-359.html" class="">
                                <span class="path"></span>
                                <span>Indoor</span>
                            </a>
                    </li><li data-catid="360" class="">
                            <a title="Taschen &amp; Rucksäcke" href="/taschen-rucksaecke-c-360.html">
                                <span class="path"></span>
                                <span>Taschen &amp; Rucksäcke</span>
                            </a>
                    </li><li data-catid="361" class="navigationLast">
                            <a title="Sport-&amp; Fanartikel" href="/sport-fanartikel-c-361.html" class="">
                                <span class="path"></span>
                                <span>Sport-&amp; Fanartikel</span>
                            </a>
                    </li><li data-catid="362" class="">
                            <a title="Auto &amp; Reisen" href="/auto-reisen-c-362.html">
                                <span class="path"></span>
                                <span>Auto &amp; Reisen</span>
                            </a>
                    </li><li data-catid="363" class="">
                            <a title="Outdoor" href="/outdoor-c-363.html">
                                <span class="path"></span>
                                <span>Outdoor</span>
                            </a>
                    </li><li data-catid="364" class="">
                            <a title="Büro &amp; Office" href="/buero-office-c-364.html" class="">
                                <span class="path"></span>
                                <span>Büro &amp; Office</span>
                            </a>
                    </li><li data-catid="365" class="navigationLast">
                            <a title="Testkategorie 1" href="/testkategorie1-c-365.html">
                                <span class="path"></span>
                                <span>Testkategorie 1</span>
                            </a>
                    </li>        </ul>
    
    </div>
    
    <div id="subNavigation">
    
    </div>

</div>

Noch ein bisschen Javascript
Code: 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>

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


    $("#navigation ul li").hover(function(){
         $('a',this).addClass('activ');
    },
    function(){
         $('a', this).removeClass('activ');
    });

});	
</script>

Im Firefox wird der rote <span>- Block über allen Listenelementen angezeigt. im Internet Explorer nicht.

Weiß jemand Rat?

Danke
 
Wie kein Unterschied?

Im Firefox ist der rote <span> Block über den LIs (also der Text verdeckt). Im IE ist der Text weiterhin sichtbar.

unbenanntsh.jpg
 
Soviel kann ich dir (ver)raten: wenn die absolute Positionierung der <span>-Elemente sich nicht auf ihr unmittelbares Elternelement <li>, sondern auf das Großelternelement <ul> bezieht, folgen auch die übrigen IE-Mitglieder deinen Vorstellungen.

Diese Herangehensweise hat zur Folge, dass für jedes <span> (per ID-Bezeichner) eine gesonderte top und left-Regel aufzustellen ist, wenn sie nicht alle am selben Fleck erscheinen sollen, denn ihr neuer Bezugspunkt verhält sich dagegen statisch, durchläuft nicht mit ihnen gemeinsam das Dokument.
 
Zuletzt bearbeitet:
Also bei mir ist im IE 8 genau das gleiche Problem wie im 6er oder 7er.

Die Positionierung des SPANs soll ich auf das LI Element beziehen, deshalb ist dieses auch position: relative.

Also positioniere ich das SPAN Element relativ zum LI Element. Das ist soweit kein Problem. Das Problem ist dass das SPAN Element obwohl es einen z-index von 9999 hat immer noch hinter den LI Element angezeigt wird (siehe Bild).
unbenanntix.jpg
 
Jo, und genau diese Vorgehensweise ist hier das Problem - zumindest im IE :p

Seine Lösung kennst du.
 
Zuletzt bearbeitet:
Ja das ist keine befriedigende Lösung.

Was ist das eigentliche Problem? Erkennt der IE den Z-index nicht ausserhalb des LI Elements?
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück