Overflow: hidden bug in IE8

Question

I built a Javascript carousel that scrolls UL inside a DIV holder with overflow hidden when the user presses the left or right arrow.

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 does not obey overflow: it is hidden, despite the rest of the content obeying the rule.

I looked around, but did not seem to find any mention of this particular error. Has anyone else come across something similar?

Answer 1

And, it turns out that I have installed DIV absolute positioning. Changed it relative, and it worked. I don’t know how I missed it. Strange how IE8 was the only browser that caused problems too!