I'm encountering an issue specifically in IE9 where a child div is not respecting the overflow:hidden property of its container div. The outlined blue div in the image represents the container with overflow:hidden. The goal is for the images to stay within this container.
I am aware that changing the container div to position:relative would solve the problem, but it causes the absolute positioned "previous" and "next" buttons to disappear.
This layout appears correctly in Firefox and Chrome
Current Output
Desired Output
HTML
<div id="instagramViewer" class="slideshow">
<div class="slideshowButton" id="prevImage" style="display: block;">
<a href="#" title="Previous">Previous</a>
</div>
<div class="slideshowButton" id="nextImage">
<a href="#" title="Next">Next</a>
</div>
<div class="contentItem>
<span class="contentItem" style="display: block;">
<a href="javascript: void(0);">
<img alt="words" src="http://www.example.com/image.jpg">
</a>
<div class="detailsWrapper" style="display: none; opacity: 0.678511;">...</div>
</span>
<span class="contentItem" style="display: block;">
<a href="javascript: void(0);">
<img alt="words" src="http://www.example.com/image.jpg">
</a>
<div class="detailsWrapper" style="display: none; opacity: 0.678511;">...</div>
</span>
<span class="contentItem" style="display: block;">
<a href="javascript: void(0);">
<img alt="words" src="http://www.example.com/image.jpg">
</a>
<div class="detailsWrapper" style="display: none; ...
</span>
</div>
</div>
CSS
.instagramViewerWrapper .slideshow {
overflow: hidden;
}
.instagramViewerWrapper .slideshow .content {
margin-left: 256px;
padding-top: 14px;
position: relative;
white-space: nowrap;
}
.instagramViewerWrapper .slideshow .content .contentItem {
display: inline-block !important;
margin: 0 14px 0 0;
vertical-align: top;
}
.instagramViewerWrapper .slideshow .slideshowButton {
margin-top: 20%;
position: absolute;
}
.instagramViewerWrapper .slideshow #prevImage {
left: -75px;
}
.instagramViewerWrapper .slideshow #nextImage {
right: -75px;
}