IE9 Overflow hidden issue

Question

I'm having an issue in IE9 (at least, haven't checked the other IE's) where a div with overflow:hidden is being ignored by it's child div. The blue outlined div in the image is the overflow:hidden container div. The images should be contained within the container.

I know that setting the container div to position:relative will work but there are absolutely positioned "previous" and "next" buttons that won't display if I do that.

This displays fine in Firefox and Chrome

Actual

Expected

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; opacity: 0.678511;">...</div>
        </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;
}

Solution 1

I have a couple of ideas.

1. Try changing the display style of your content items to inline-block.
2. Try wrapping the content of the slideshow in a relatively positioned div - this tells the browser about the rendering order of the descendants. (You will need to recalculate the positioning of your prev and next buttons. In fact, they no longer need to be positioned absolutely - they could be outside the wrapper, floated left and right. Alternatively you could absolutely position them relative to the body. It's up to you.)

Solution 2

Try adding position:relative to the elem that is overflow:hidden so in you css right below overflow add position relative. I've had this issue in IE before and that fixed it.