Question

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?

Answer 1

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!