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!
I have added your bug report into my website. This horizontal scrollbar bug is very common, very frequently encountered and is often perceived as such by ordinary users too.
This is also the kind of bug that obviously should be dealt with and fixed fast by a browser manufacturer like Microsoft.
Regards,
Gérard
I am happy to hear you are linking to this from your site! You have a nice collection of browser bugs there. I have bookmarked your page.
Thanks for the comment!
I know man, using CSS hacks is most definitely undesired. But, in this case, it is the only solution I could reach (and I think it is worth it to fix this tremendously annoying bug). You can rest assured that I looked long and hard trying to find a better solution.
<style type="text/css">
div.code { overflow: auto; }
</style>
<!--[if IE]>
<style type="text/css">
div.code { overflow: visible; overflow-x:auto; overflow-y:hidden; padding-bottom:15px; }
</style>
<![endif]-->
I can't remember for sure if I set overflow back to visible or not, but it was something like that. It's basically applying the good CSS to all browsers and then overriding that good CSS with IE-specific CSS.
Still, the meat of this article definitely helped with what I was working on. Thanks!
For what it's worth, you do have to reset overflow to visible in the conditional comment. Thank you for your insight!
Css Trick: Hide Disabled Internet Explorer Vertical Scrollbar
www.trap17.com/…/…-hide-disabled-internet-explorer-vertical-scrollbar_t20688.html
Guess What?
There are a few basic guidelines you should be aware of before leaving a comment…
- If you choose to display your email address, it will not be detected by spam bots
- Comments are limited to 3,000 characters; so far you have used none of them
- HTML will be encoded; links and line breaks will be converted automatically
- Comments containing five or more links will be subject to moderation
