The Blog of Josh Stodola

I use IE exclusively and I think it is the fastest loading browser available. However, I would never shy away from admitting that it is loaded with annoying bugs. A common one you will see is how it interprets the overflow:auto style when there is enough text to force a horizontal overflow. For whatever reason, you will always get a vertical scrollbar to match the horizontal, regardless of whether or not a true vertical overflow exists...

It's as if the container element does not account for the height of the horizontal scrollbar! So what can you do about it? Well, you could forget about overflow:auto completely and just use the overflow-x:scroll style. That would take care of it. However, overflow-x is not an established and standardized CSS property (yet), and therefore your overflow will not work as expected in other browsers.

This bug drove me nuts when I was developing the code snippets for this blog. Fortunately I was able to come up with a bulletproof solution, prior to pulling all of my hair out. There is no Javascript involved; it is mere combination of one CSS hack and one IE conditional comment.

The CSS hack is used to add the overflow:auto style to all browsers except IE. We have already established that this style causes problems in IE, so we need to hide it. Here is an example of the hack (for a div element with a class of "code").

UPDATE: A hack is no longer needed to fix the bug (thanks to a helpful comment from glompix). Suppose we have the following style...

div.code {
    overflow:auto;
}

The only browser I know of that fails to interpret that selector is Internet Explorer. If you happen to discover otherwise, please let me know! So, that part is covered. To fix the bug, we have to incorporate an IE-specific style selector using a conditional comment, which belongs before the </head> tag...

<!--[if IE]><style type="text/css"> div.code { overflow:visible; overflow-x:auto; overflow-y:hidden; padding-bottom:15px; } </style><![endif]-->

Remember, IE supports the overflow-x and overflow-y styles, which corrects the problem. For now! Note that in this example, I am targeting <div> elements with a class name of "code". You could replace this with any element that triggers the bug. Personally, I would prefer to have the overflow-x and overflow-y properties available in all browsers. I think that makes more sense. I have tested this hack in IE6+, Firefox 2, Opera 8+, Netscape, SeaMonkey, and Safari. As far as I can tell, it should work in every browser with CSS capabilites.

Hope this helps!