Internet Explorer Z-Index

Question

I've wrote a tiny JavaScript for this side: http://www.tx-customers.com/ep-immobilien/?page_id=183.

Now in the Internet Explorer I get problems with the layers, so the Hover functions doesn't work correctly. There're list items on top of the Images relating to a specific images, changing the class of this image to be viewed. This works but if you click one Image or the Slider activates (after 3 Seconds) the li-items are lying behind the shown image. It works in FF, Opera, Safari and Chrome. I've searched for z-index Workarounds tried to set the positions and z-indexes but it changed nothing.

The HTML Structure is:

<div id="team">
    <div class="images">
        <img id="1-team-member-picture" class="team-member" src="img-src" rel="185">
        <li class="splitter" rel="1"></li>
        <img id="2-team-member-picture" class="team-member" src="img-src" rel="185">
        <li class="splitter" rel="2"></li>
        <div id="results">
            <p class="res"></p>
        </div>
        <p class="clear"></p>
    </div>
</div>

The CSS Code:

#team .images {
    float: left;
    background: url(images/gesamt_962px.png) no-repeat;
    position: relative;
    height: 382px;
    width: 769px;
    z-index: 5;
    padding-left: 64px;
}

#team .images img {
    height: 382px;
    position: relative;
    z-index: 4;
}

#team .images .team-member {
    position: absolute;
    display: none;
    left: 32px;
}

#team .images .current, #team .images .clicked {
    display: inline;
}

#team .images li {
    width: 30px;
    height: 382px;
    float: left;
    position: relative;
    z-index: 20;
    list-style-type: none;
}

CSS Code for IE ( a try) :

#mainwrap {
    font: 14px/20px Times New Roman, Times, sans-serif;
}

#team {
    width: 800px;
    margin: 0 auto;
    position: relative;
    z-index: 20;
}

#team .images {
    margin: 0 auto;
    background: url(images/gesamt_962px.png) no-repeat;
    position: relative;
    height: 382px;
    width: 769px;
    padding-left: 64px;
    z-index: 10;
}

#team .images .team-member {
    position: absolute;
    display: none;
    left: 32px;
    z-index: 0 !important;
}

#team .images .current, #team .images .clicked {
    position: absolue;
    display: inline;
    z-index: 0 !important;
}

#team .images li {
    width: 30px;
    height: 382px;
    float: left;
    list-style-type: none;
    position: relative;
    z-index: 1 !important;
}

And this is the Script: http://www.tx-customers.com/ep-immobilien/wp-content/themes/epi/js/teamSlider.js

It's my first try in JS, so please don't blame me for some stupid coding! :P

A part of the JS where the Hover is used.

jQuery($splitter).mouseover( function () {
    if(!$clicked) stopAnimate();
    slideRemoveClass("current");
    $('#' + $(this).attr('rel') + '-team-member-picture').addClass("current");
});

jQuery($splitter).mouseleave( function () {
    if(!$clicked) animate();
    slideRemoveClass("current");
    $('#' + $(this).attr('rel') + '-team-member-picture').removeClass("current");
});

function animate() {
    clearTimeout(interval);
    interval = setTimeout( slide, $delay );
}

function stopAnimate() {
    clearTimeout(interval);
}

Nothing works :/ the IE should not be used by anyone! Someone a idea? — Patrick Bläcker, Nov 14 '11 at 15:17

score 1 · Answer 1 · edited May 23 '17 at 12:22

1

Z-Indexing is... strange, for lack of a more appropriate word, in IE.

To make a long story short, to properly use z-indexing with IE every element (from parent to child) involved has to have a z-index (sometimes all the way back to the body).

This question here did an excellent job of answering this: IE7 Z-Index Layering Issues

edited May 23 '17 at 12:22

Community

1
1

answered Nov 09 '11 at 14:42

Geekswordsman

1,297
8
10

I'll will isolate the code and test it with your suggestion and let you know of the result – Patrick Bläcker Nov 09 '11 at 15:00
Hm, thanks for your great answer but i cant solve this problem :/ – Patrick Bläcker Nov 09 '11 at 15:20
Are you able to post your JS code, or at least the part that deals with the on hover? I once nearly tore my hair out thanks to IE doing a site that had an expanding menu that went over an image display that rotated (no flash involved, all HTML, CSS, and JavaScript) and ultimately this was the solution. I think yours is the same, and I know you'll breath easier like I did when its finally solved! – Geekswordsman Nov 09 '11 at 19:02
I Updated my Question and added the JS Code ( there's also a link to the whole Script a bit higher) – Patrick Bläcker Nov 11 '11 at 13:40
Found the Problem: You have to set a background color in Internet Explorer. Here the fix: background-color: #fff; filter: alpha(opacity=1); – Patrick Bläcker Nov 15 '11 at 17:01

Internet Explorer Z-Index

1 Answers1