Question

I am currently at a loss with this particular bit of HTML/CSS problem. I have a carousel that has two absolutely positioned li elements on each side to allow for navigation (previous image/ and next image). These two li elements show up correctly in all browsers other than all versions of IE (7-9), however, in IE the li elements are shown behind the main element, even if I give them a z-index.

I am probably missing something as it was the end of the day and I was very tired, but I cannot seem to figure out why this is.

What makes this problem even weirder is that the li elements display correctly if I give them a background! As soon as I give them a background-color, they appear in front of the element

I suspect it may be a bug with IE as it is rare for me to fail to debug a CSS file, however, as I said, I was pretty tired.

Please ignore the opacity values and display values, these are altered with jQuery. They are completely irrelevant.

HTML:

<header id="carousel">
    <div id="carousel-holder">
        <div id="carousel-canvas" style="width: 2364px; ">
            <figure id="more-business" class="">
                <img>
            </figure>
            <figure id="more-money" class="active">
                <img>
            </figure>
        </div>
    </div>
    <nav>
        <ul id="arrow-nav">
            <li id="carousel-arrow-previous"><a href="#previous" title="Previous" class="sprite">Previous</a></li>
            <li id="carousel-arrow-next"><a href="#next" title="Next" class="sprite">Next</a></li>
        </ul>
    </nav>
</header>

CSS:

header#carousel {position:relative;width:790px;height:275px;margin:10px auto 0;padding:0;overflow:hidden;}
header#carousel div#carousel-holder {width:788px;height:250px;background:#fff;border:1px solid #999;border-radius:10px;margin:auto;padding:0;overflow:hidden;}
header#carousel div#carousel-canvas {position:static;height:250px;}
header#carousel div#carousel-canvas figure {display:block;position:static;float:left;width:788px;height:250px;border-radius:10px;margin:0;padding:0;overflow:hidden;}
header#carousel div#carousel-canvas figure img {width:788px;height:250px;}

header#carousel nav ul#arrow-nav {position:absolute;top:1px;left:1px;width:788px;height:250px;padding:0;margin:0;list-style-type:none;}
header#carousel nav ul#arrow-nav li {position:absolute;display:block;width:200px;height:250px;z-index:10;}
header#carousel nav ul#arrow-nav li#carousel-arrow-previous {top:0;left:0;}
header#carousel nav ul#arrow-nav li#carousel-arrow-next {top:0;right:0;}
header#carousel nav ul#arrow-nav li a {position:absolute;top:50%;margin-top:-35px;display:none;width:50px;height:70px;overflow:hidden;opacity:0;text-indent:-1000px;}
header#carousel nav ul#arrow-nav li#carousel-arrow-previous a {left:20px;background-position:-95px -156px;}
header#carousel nav ul#arrow-nav li#carousel-arrow-next a {right:20px;background-position:-153px -156px;}

EDIT

I meant to say ‘li’ not ‘div’

UPDATE

It seems that the problem may not be with HTML/CSS as I have managed to determine that the element is being displayed at the front of the page. The problem seems to be occuring with jQuery. The ‘mouseenter’ function appears not to fire when I move my mouse ove the element. Is this a known bug in jQuery?

SOLUTION

I have figured out what the problem is. It is to do with the ‘hasLayout’ of the elements I have mentioned. Because they have a transparent background, the jQuery event is not captured when I place my mouse over them. The solution to this is to set a transparent background with an image.

Please refer to:
Mouseenter only fired on border of transparent div in IE9

Thank you for all your advice, and sorry to waste your time.

Answer 1

I think this is being caused by your “text-indent” being set as a negative on the anchors. I believe it has something to do with the anchor element controlling its own layout in IE, and not halting the text at its edges. Here is a brief description of the “hasLayout” property and some of the issues it can cause in IE. I removed the “text-indent” and the Previous / Next links appeared as normal over any images I set in the carousel.