Fixing the IE Overflow Vertical Scrollbar Bug

November 2007

Posted on the 1st at 7:06 PM CST

Filed under CSS

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...

Example of the overflow bug in IE

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!

Permalink

Viewed 53,460 times

Del.icio.us Digg It

Digg It

Add a Comment

Comments (55)

Comment from Gérard Talbot on November 2nd, 2007 at 10:26 AM

Hello Josh,

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

Comment from Josh Stodola

on November 2nd, 2007 at 10:52 AM

Hi Gerard,

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!

Comment from glompix on May 8th, 2008 at 3:03 PM

If you're using conditional comments already, why not just use those to avoid applying this fix to non-IE browsers? It might just be personal preference, but CSS hacks make me a little uneasy. I just wrote an article about this if you want to check it out.

Comment from Josh Stodola

on May 8th, 2008 at 4:53 PM

Glompix, I am not sure I get your point. Conditional comments are specific to IE. All other browsers will evaluate them as traditional HTML comments, so they get ignored (this was absolutely intentional). With that said, I don't know how you expect to apply a CSS rule to non-IE browsers using a conditional comment that will only get interpreted by IE. Catch my drift?

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.

Comment from glompix on May 8th, 2008 at 5:12 PM

If I was misunderstood, sorry. I meant to say, why not something like this:

<style type="text/css">
div.code { overflow: auto; }
</style>



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!

Comment from Josh Stodola

on May 8th, 2008 at 6:42 PM

Well I just tested that and it works great! I definitely recall trying that originally, but for some reason it did not work for me then. I'll bet I forgot to reset overflow to visible in the conditional comment (or I likely attempted to reset it, but mispelled "visible", since it just took me 4 tries to spell it correctly in this comment!).

For what it's worth, you do have to reset overflow to visible in the conditional comment. Thank you for your insight!

Comment from yoosuf on July 30th, 2008 at 8:52 PM

its works!, tks buddy

Comment from Ondrej on August 28th, 2008 at 2:53 AM

Might be useful...

Css Trick: Hide Disabled Internet Explorer Vertical Scrollbar
www.trap17.com/…/…-hide-disabled-internet-explorer-vertical-scrollbar_t20688.html

Comment from Frédérik Legrand on September 9th, 2008 at 10:43 AM

Comment from Gérard Talbot on September 25th, 2008 at 3:18 PM

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

Regards, Gérard

Comment from Josh Stodola

on September 25th, 2008 at 4:54 PM

Thanks Gerard, but the link does not work! It says page not found.

Comment from Gérard Talbot on September 26th, 2008 at 11:15 AM

Josh,

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

Comment from iGuide on September 29th, 2008 at 10:00 PM

This solution doesn't do the trick in all cases. I have a DIV with a 100% width, and applying the same solution to the width instead of height will not hide the vertical scrollbar, or fix the DIV width. The only solution I could find was to add a percentage width to an inner DIV.

Comment from Gérard Talbot on October 25th, 2008 at 1:35 PM

Bug 333225 at connect IE beta feedback: Horizontal scrollbar present when there is no need

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

Comment from Connie on December 2nd, 2008 at 1:10 AM

Thank you! I appreciate you sooooo much. This works great.

Comment from Ralph de Ruijter on December 16th, 2008 at 3:55 AM

Thx for this solution this bughas been annoying me for some time, but I never could find a satisifying solution. Yours works perfect. Now lets hope this will be fixed.

Comment from Giacomo on December 24th, 2008 at 2:29 PM

PERFECT.

I just find no better words to say you THANK YOU.

Comment from LeZu on December 28th, 2008 at 1:08 AM

Thank you, this works great for my site.

Comment from Priya

on January 9th, 2009 at 2:42 PM

I need a urgent help. I have nested div in my jsp with overflow:auto for parent div. Whenever I try to scroll the div, it got disappear. I am using IE6. In Mozilla, it is working fine.
Any quick response will be appreciated.

Comment from Josh Stodola

on January 9th, 2009 at 4:54 PM

I think it's a bug in IE6. Try applying the zoom:1 CSS property to the element that is disappearing. This trick has been known to whip IE into shape.

Comment from Cliff Cooley on January 20th, 2009 at 8:31 AM

In the original solution above, elements with potential overflow will always have a padding-bottom of 15px in IE 6/7, whether there is actual overflow or not. In FF, when the horizontal scrollbar is displayed, the vertical height of the element is expanded to contain the scrollbar.
Does anyone know of an IE hack which will only expand the height of the element when a scrollbar is present ?

Comment from Karen on February 2nd, 2009 at 11:42 AM

I have tried all of your suggestions above but unfortunately I am still having the same problem. I have put the ie code into a stylesheet created for ie7 and still it is not working. The overflow scroll works in FF but not IE7.

Please help...

Thank you so much,
Karen

Comment from Josh Stodola

on February 2nd, 2009 at 12:53 PM

Karen, I know that this method works. In order to help you, please post an example of the issue online and I will take a look at it.

Comment from tippGame on February 21st, 2009 at 5:12 AM

thank you very much!!!!! Worked well for me and solved a large problem!

Comment from progrmmer on March 10th, 2009 at 7:01 AM

Thanks, this works for me!

Comment from slimmy on April 1st, 2009 at 3:53 PM

The graphic scrollbar on various pages (i.e. Rentals) works perfect in all Browsers I have tested except IE6 or 7. The scroll bar appears as it is suppose to, but will not scroll. Please help. I really need it to work in IE 7. IE6 is not that important to me. Thanks in advance.

Comment from Josh Stodola

on April 1st, 2009 at 4:22 PM

Slimmy: It looks like your menu has a higher z-index. In other words, it is stacked ON TOP of your page content. Try fiddling with the CSS z-index to get things working as expected.

Comment from slimmy on April 2nd, 2009 at 9:02 AM

Hi Josh, Thanks for your help. I tried changing the z-index, but no matter what order, or what I changed, the navmenu seems to stay on top so i cannot scroll the scrollbar. Strange.

Comment from Josh Stodola

on April 2nd, 2009 at 1:15 PM

I noticed in your markup the menu comes AFTER the content. But on the page the menu is displayed BEFORE the content. This might be part of your problem. Do you have a specific width set on your menu? Good luck!

Comment from Storm on June 2nd, 2009 at 11:56 PM

Nice, but we aren't allowed to use CSS3 in our products yet, and overflow-x / overflow-y are CSS3 selectors. Anyone have a CSS2 fix for this?
I tired:
body {
margin-right: -15px;
margin-bottom: -15px;
}
but it didn't work (IE6).

Comment from Joyce on June 12th, 2009 at 5:00 PM

My problem at the moment, is that I only want to add the padding when the horizontal scroll bar actually shows up. Sometimes, the content of my divs fit and doesn't need to scroll bar. I don't want the padding there in that case. Any ideas?

Comment from Dave on June 16th, 2009 at 4:43 AM

Lol, I came here looking for a fix for IE because it's displaying a small amount of scrolling then increasing it as I begin to scroll down. I saw the start of your article "I use IE exclusively and I think it is the fastest loading browser available." laughed and thought "I wonder how this page displays in IE" only to be greeted by your "Upgrade your browser gramps!" message... it's V.8, so I assume age isn't anything to do with it and you've turned your back on your fabulous IE... Well done, but you might want to do something about the start of this post because it's a bit hypocritical, especially as some of us have been using Firefox over IE since the days of Phoenix, some 6+ years ago!

Comment from Josh Stodola

on June 16th, 2009 at 5:53 PM

Haha Dave, sorry about that. That message is only intended to display on versions of IE that are 6 or less. Evidently the version detection is not working correctly. Thanks! Sorry to sound hypocritical, but I do believe IE is the best browser available today, as long as it is version 7 or above.

Comment from Felipe Avilis on June 23rd, 2009 at 9:47 AM

Hi Josh. Great solution here. Do you know how to use this overflow solution on a DIV with "height: auto; max-height: 400px; min-height: 100px;" ?

Comment from Alex Lorenz on July 8th, 2009 at 6:30 PM

I'm experiencing this problem, and I'm not quite sure how to resolve it.

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.

Comment from Josh Stodola

on July 8th, 2009 at 6:55 PM

What is that... a question? The page looks OK to me. I can't save you if I don't know what you are talking about.

Comment from Alex Lorenz on July 9th, 2009 at 5:52 AM

That's the problem. in IE, many times, it shows up fine, but... Try this:

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

Comment from Ramesh Ramalingam on August 25th, 2009 at 5:04 AM

Thanks Yaaar..... Thank u so much

Comment from @SCCA on September 17th, 2009 at 12:00 PM

I have a similar situation. I have a div inside table td. This div has a fixed size of 400px; I used the hack, but still cann't see the vertical scroll bar. style for table -
.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,

Comment from Chris D on September 25th, 2009 at 1:53 PM

I found this site looking for a solution to ie6's lack of support for position:fixed. The simple solution of putting the following in a conditional comment was only partially working.

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:



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.

Comment from zsdfasdf on October 21st, 2009 at 10:29 AM

asdfasdfasdfasdfasdfasdf

Comment from john on October 21st, 2009 at 10:30 AM

* 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

Comment from Tyres Dealer on November 13th, 2009 at 6:57 AM

I was just thinking about Fixing the IE Overflow Vertical Scrollbar Bug and you've really helped out. Thanks!

Comment from Khan

on November 19th, 2009 at 7:39 PM

There are many bug in the internet explorer, the solution povided in the post is really great, thanks for sharing.

Comment from Scott Smith on November 23rd, 2009 at 3:51 PM

Just wanted to say thanks. I was trying to make a horizontal scrollable div with a min-width, but whenever the header wrapped it would pop that vertical scroll bar on me. Appreciate the help.

Comment from bitstomper on December 11th, 2009 at 9:42 AM

I also have a fix for the following issue:

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:



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.

Comment from Nikhil Rajhans on December 21st, 2009 at 10:44 AM

Hi,

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.

Comment from Mariusz on December 23rd, 2009 at 6:37 PM

Excellent. Thank you very much for that great help! Had to get rid of the vertical scrollbar that was displayed at the IE. Your post explained perfectly how to do it. Great great great.

Comment from traslochi intercontinentali on December 30th, 2009 at 5:37 AM

I was just thinking about Fixing the IE Overflow Vertical Scrollbar Bug and you've really helped out. Thanks!

Comment from Car Market on January 19th, 2010 at 12:49 AM

Well, personally I'm starting to hate IE browser all together, simply because it is making my life as a developer so hard. Why don't microsoft work on something like firefox and update newer versions everytime instead of sticking with IE6, IE7 IE ... 11
Why they make their own standards ... its web and its open ?!!
Thanks for hearing me

Comment from Homer on February 1st, 2010 at 6:57 PM

I cannot get the scrollbar to appear in IE for tbody. Is this possible? Scrollbar appears and works fine in FF.
Thanks for any help.

<style type="text/css">
tbody.tbody1 {overflow: auto; height: 437px; width: 1280px; }
</style>

Comment from Josh Stodola

on February 1st, 2010 at 8:34 PM

@Homer You will probably have to put the entire table in a <div> and apply the styles to it. That's the only thing I can think of :(

Comment from Homer on February 2nd, 2010 at 8:25 AM

I'll give it a try. Thanks!

Comment from Homer on February 2nd, 2010 at 9:48 AM

Josh, it works fine. Thanks for the help!

Comment from Les on February 2nd, 2010 at 5:54 PM

Thank you so much for this. I have been pulling my hair out for days on this and your site helped my get the result I wanted.

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

Comments Feed

Trackback URL

Have Your Say

Name
Email
Web Site
8 + 2 =	← Answer this to prove you are human
Comments	Tell me what's up... If you see this field, leave it blank. It is used to help identify bots.
	Remember Me Display My Email Address
	Chill Out…

No Trackbacks

The Blog of Josh Stodola

Guess What?

Have Your Say

LOGIN

EMAIL SUBSCRIPTION