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
Inactive horizontal scrollbar visible in some cases
bug ID 331669:
https://connect.microsoft.com/IE/feedback/ViewFeedback.aspx?FeedbackID=331669
Regards, Gérard
I added your bug to my IE 8 bug webpage:
http://www.gtalbot.org/BrowserBugsSection/MSIE8Bugs/#josh-stodola
Try from there to reach the webpage
Connect Internet Explorer beta feedback (bug 331669)
Inactive horizontal scrollbar visible in some cases
bug ID 331669:
https://connect.microsoft.com/IE/feedback/ViewFeedback.aspx?FeedbackID=331669
Note that this href is a secure one (https).
Regards, Gérard
URL (secure https):
https://connect.microsoft.com/IE/feedback/ViewFeedback.aspx?FeedbackID=333225
The bug 331669 feedback item was not filed correctly, hence the new bug 333225 report feedback at IE connect.
The bug 331669 feedback report has now 15 validations and a 4.4 rating from 18 ratings.
Regards, Gérard
I just find no better words to say you THANK YOU.
Any quick response will be appreciated.
Does anyone know of an IE hack which will only expand the height of the element when a scrollbar is present ?
Please help...
Thank you so much,
Karen
I tired:
body {
margin-right: -15px;
margin-bottom: -15px;
}
but it didn't work (IE6).
www.MINIM.IS/infinitos/index.htm
I have the following code for the scrolled div:
<div style="overflow-x: hidden; overflow-y: auto; width: 942px; height: 300px;">
And for a horizontally-scrolling page, I have:
<div style="overflow-x: auto; overflow-y: hidden; width: 942px; height: 280px;">
Please save me.
Pull up that page, then click on another window that you have open, then click back on that page again (you may need to do it a couple of times). Here's a screenshot: www.MINIM.IS/scrn.gif
.data-table td {
border-right: 1px solid #999999;
border-bottom: 1px solid #999999;
text-align: left;
padding-left: 2px;
}
style for div inside td is - div style="border: 1px solid #bbb; height:400px; overflow:visible; overflow-x:auto; overflow-y:hidden;"
I don't mind if vertical scroll bar shows up all the time. But in this case, it doesn't show up at all.
Appreciate any help.
Thanks,
html, body {height: 100%; overflow: auto:}
#FIXEDPOSITIONELEMENT {position: absolute;}
The problem was it was causing the scroll bar to break: one could scroll to the bottom of the last absolutely positioned element and no further (there were numerous relatively positioned divs below). Changing the relative positioning to static in the conditional didn't help. Neither did adding overflow:visible or changing overflow:auto to overflow-y:auto.
The solution I found that DID work to get ie6 to emulate position:fixed WITHOUT causing any problems with the scroll bar was the following conditional using an expression:
<!--[if lte IE 6]>
<style type="text/css">
/*<![CDATA[*/
* html #FIXEDPOSITIONELEMENT { /*ie6 only rule, applied on top of the default in regular css*/
position: absolute;
top: expression(document.compatMode=="CSS1Compat"? document.documentElement.scrollTop-0+"px" : body.scrollTop-0+"px");
}
/*]]>*/
</style>
<![endif]-->
Personally I don't understand it because it looks like the star hack inside of conditional. But I do know it works.
Hope this helps someone out there.
* 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
When you want browser window to display a scroll bar (in case you want to prevent layout from shifting left when the content overflows the page and your browser window displays a scroll bar which it does not on other pages) IE displays either a disabled scroll bar or an enabled scroll bar depending on your styling.
To fix this add this to your CSS file:
body {
overflow: scroll;
)
and add the following to your header:
<!--[if IE ]>
<style>
body {
overflow: hidden;
}
</style>
<![endif]-->
Now you can still set scrolling for elements in your page.
Setting the body overflow to scroll will cause other elements to inherit this style in IE.
Adding the above statement will prevent that.
I am facing the same problem which you had discussed above. The vertical scrollbar in IE 6.0 appears but it do not scroll after a certain limit.
I tried everything what you had discussed here like tuning the z-index, adding the hack but none worked. Please help me out of this.
You can view the code here http://www.ennov8-web.com/dev/aboutus.html
Looking forward for some working solutions.
Why they make their own standards ... its web and its open ?!!
Thanks for hearing me
Thanks for any help.
<style type="text/css">
tbody.tbody1 {overflow: auto; height: 437px; width: 1280px; }
</style>
<!--[if IE]>
<style type="text/css">
tbody.tody1 { overflow: visible; overflow-x:auto; overflow-y:hidden; padding-bottom:15px; height: 437px; width: 1280px;}
</style>
<![endif]-->
I have added a link to your webpage to my Team's dev wiki for future reference.
Cheers
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
