The overflow property specifies what happens if content overflows an element's box and is supported by all major browsers. However Internet Explorer 6 and 7 display some peculiar (and undesired) behavior when overflow is set to 'auto'. With that setting, the overflow is clipped, and a scroll-bar is added to see the rest of the content.
So, what happens when content overflows horizontally? Most browsers are smart enough to know to increase the height of your element to allow for the added scroll-bar. IE6 and IE7 will not, resulting in the content clipped and a vertical scroll-bar added as well.
The solution
Unfortunately , you'll need to use either IE-specific (IE7 and lower) CSS expressions or JavaScript. CSS expressions are embedded JavaScript expressions and are more elegant and convenient than full-blown JavaScript to script styles. On the other hand, for performance reasons it is recommended that they are avoided. This article in GoogleCode elaborates on the subject.
Using CSS expressions:
Include in your IE7 and lower stylesheet
.horizontal_scroll {
padding-bottom: expression((scrollHeight-clientHeight) + 'px');
overflow-y: hidden;
}
Using JavaScript:
<script type="text/javascript">
if((navigator.appName == "Microsoft Internet Explorer") && (parseInt(navigator.appVersion) <= 7)) {
$$('.horizontal_scroll').each(function(elem) {
elem.style.paddingBottom = (elem.scrollHeight - elem.clientHeight) + 'px';
elem.style.overflowY = 'hidden';
}
</script>
As you can see, the JavaScript alternative is more convoluted. It's up to you which one to use on your webpage.
Explanation
Leaving aside the JavaScript syntax, both solutions are based on the read-only properties scrollHeight and clientHeight. scrollHeight is a measurement of the scrolling height of an element. clientHeight returns the inner height of an element without the scroll bar. The difference between these two values is the padding you need to add to the bottom.