Currently, I am facing an issue with two images not displaying correctly on a website that I am working on. The problem seems to be specific to IE 9, as other browsers are working fine. The trouble arises when I try to create a slideshow with a shadow background and transparent clickable divs at the ends for navigation purposes. The shadow image is overlapping the transparent divs, leaving only the extreme edges visible, which becomes fully visible upon hovering 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>
The elements #slideshow-area, #left-arrow, and #right-arrow seem to be causing the issue in my HTML layout.
#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;
}
I have checked my CSS code and ensured everything is correct, but the issue persists only in IE 9. If anyone has any suggestions on how to fix this, please let me know. You can visit the website for reference.
Thank you,
Morgan