Question

I have a div box (black) that will display a few different product images for the user to scroll through. I am using overflow-x: hidden; and overflow-y: visible; CSS elements to hide the extra products in the UI. It is displaying correctly in Chrome, Firefox, and Safari, but IE 7 and 8 are causing problems. IE 7, the product images are displaying outside of the black box with no scrollbars and in IE 8, no scroll bar is being displayed at all. Here is a link to the code: http://jsfiddle.net/ryanabennett/H8fHX/4/

You can see the different results if you try it in the different browsers. Chrome and Firefox is displaying correctly. Again, I need some CSS help with IE. Thanks in advance.

Here is the HTML:

<div class="livitembox">
 <div class="productbox">
  <div class="livitem">
    <div class="Livwidgetexpandimg">
      <a href="#"><img src="#" class="popupbox" /></a>
    </div>
   </div>
</div>
<div class="productbox">
  <div class="livitem">
    <div class="Livwidgetexpandimg">
      <a href="#"><img src="#" class="popupbox" /></a>
    </div>
  </div>
</div>

Here is the CSS:

.livitembox{
background: none repeat scroll 0 0 #151515;
margin: 20px 5% 0;
height: 120px;
overflow-x: hidden;
overflow-y: visible;
width: 200px;
}

.productbox{
float: left;
height: 150px;
margin-left: 5px;
/*overflow: hidden;*/
position:relative;
}

.livitem{
float: left;
position: relative;
top: 3px;
}

.Livwidgetexpandimg{
background: blue;
height: 75px;
margin-left: 10px;
margin-top: 10px;
margin-right: 10px;
padding: 5px;
width: 75px;
float: left;
}

.popupbox{
border: medium none;
height: 75px;
width: 75px;
}

.popup{
background: yellow;
display: none;
float: left;
/*height: 122px;*/
/*margin-left: -10px;*/
opacity: 0;
/*width: 175px;*/
z-index: 50;
height: 106px;
width:230px !important;
position:absolute;
top:0;
left:0;
}

Answer 1

You can fix the IE7 issue by positioning the .livitembox relative.
http://www.rowanw.com/bugs/overflow_relative.htm

edit: putting overflow-y: auto will fix the issue in IE8.