Overflow: hidden bug in IE8
11,637
Ah, turns out I had the DIV set to absolute positioning. Changed it to relative and it worked. Not sure how I overlooked that. Strange how IE8 was the only browser it caused problems with too!
Author by
thesonglessbird
Updated on June 05, 2022Comments
-
thesonglessbird almost 2 years
I've built a Javascript carousel that scrolls a UL inside a holder DIV with overflow set to hidden when the user clicks a left or right arrow.
The HTML is as follows:
<div id="promo-carousel-holder"> <ul> <li class="promo-item"> <img src="_includes/images/promo-tyre-image.jpg" alt="" /> <h4><strong>30% off</strong> Title</h4> <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium. <a href="#" class="promo-link">View Offer</a></p> </li> <li class="promo-item"> <img src="_includes/images/promo-tyres-image.jpg" alt="" /> <h4><strong>30% off</strong> Title</h4> <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium. <a href="#" class="promo-link">View Offer</a></p> </li> <li class="promo-item"> <img src="_includes/images/promo-tyre-image.jpg" alt="" /> <h4><strong>30% off</strong> Title</h4> <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium. <a href="#" class="promo-link">View Offer</a></p> </li> </ul> </div>
Everything works fine in IE6,IE7,Firefox,Opera,Chrome and Safari, but in IE8 the bottom line of text inside the P tag doesn't obey the overflow: hidden, despite the rest of the content obeying the rule.
I've had a look around but can't seem to find any mentions of this particular bug. Has anyone else encountered anything similar?