Z-index in IE9 Error

Question

I'm currently working on a site, and I am having problems with two images not displaying correctly. IE 9 is the only browser I'm having problems with, so I just need some help. I'm working on a slideshow that has a shadow background to it. At the ends of the slideshow I'm attempting to just create two clickable divs that are transparent so I can move the slideshow back and forth. But the shadow background image is being layered on top of the transparent divs, and covering all but the extreme edges of the divs, whenever the cursor changes to a pointer is when you're over the divs.

<div id="HomeCarousel">
        <div id="slideshow">
            <div id="slideshow-area">
                <div id="slideshow-shadow"><img src="@ACCOUNTRESOURCES/BannerOverlay.png" /></div>
                <div id="slideshow-container">
                    <div id="slideshow-scroller">
                        <div id="slideshow-holder">
                            <div class="slideshow-content" id="slide0">
                                <img name="image0" src="@ACCOUNTRESOURCES/Orange.png"/>
                            </div>
                            <div class="slideshow-content" id="slide1">
                                <img name="image1" src="@ACCOUNTRESOURCES/Green.png"/>
                            </div>
                            <div class="slideshow-content" id="slide2">
                                <img name="image2" src="@ACCOUNTRESOURCES/Blue.png"/>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div id="click">
                <div id="left-arrow"></div>
                <div id="right-arrow" ></div>
            </div>
        </div>
    </div>

This is my html layout, #slideshow-area and #left-arrow,#right-arrow are the elements I'm having a problem with.

   #slideshow {
     position:relative;
   }
   #slideshow-area {
     position:absolute;
     left:35px;
         width:910px;
     height:279px;
   }
   #slideshow-shadow {
     position:absolute;
     width:966px;
     top:-22px;
     left:-28px;
     z-index:2;
   }
    #slideshow-container {
     position:absolute;
     overflow:hidden;
     width:910px;
     height:279px;
    }
    .slideshow-content {
     width:910px;
     height:279px;
    }
    #click {
     position:relative;
     position:absolute;
     z-index:4;
    }
    #left-arrow, #right-arrow {
     height:279px;
     width:35px;
     position:absolute;
     top:22px;
     z-index:3;
    }
    #left-arrow {
     left:0px;
     cursor:pointer;
    }
    #right-arrow {
     left:945px;
     cursor:pointer;
    }

That is my CSS, as far as I know I'm doing things correctly, just IE 9 is not displaying it. Does anybody know anything I could do to fix this? Here's the website if you need it.

Thanks,

Morgan

Answer 1

div#click has no height; it is a 980x0px element since it does not contain a non-floated, non-positioned element. Define height on this element and the arrows contained in it will work as expected.