IE6 and the (double) scrollbar issue
Last week I fixed a very strange IE6 bug. In the first place Internet Explorer 6 showed no scrollbar at all where other ‘normal’ browsers did when they should. Everybody is familiar with IE6 problems like this because it has a lot of bugs as you may know. So I did a little research and find out about the ‘Holly Hack’ that should fix the IE6 scroll problem. Unfortunately it did not fix my problem so I changed the height and width of the body tag with CSS to 100% which fixed the problem on some pages. Yes on some pages because IE6 showed a double scrollbar on some other pages.
This behavior is very strange and I did never saw something like this before. After searching the internet I could not find any information about this double scrollbar problem. So I had to try other things. What I always do when I have an issue like this is ‘clean’ the page. I remove some div’s and Javascript to see when the issue is resolved. After a while I removed the jQuery library from the code and the issue was fixed. No double scrollbars anymore in IE6. That was a nice find but we did need jQuery for the website. So I upgraded jQuery and the double scrollbar issue was gone and the site was functioning again. (Another good reason to keep external libraries up to date.)
So IE6 displayed only one scrollbar now as it should. 
The ‘other’ browsers (Firefox/Safari) still worked of course. Then I started testing the site and a new problem appeared in Internet Explorer 6. When showing or hiding a div with the jQuery .show() and .hide() methods the scrollbars started to move. Wow! That is a new IE6 problem I had never seen before. After a lot of searching and debugging I was thinking about the 100% width/height fix that I did at the beginning. After removing this fix the moving scrollbar issue was gone but again no scrollbars on all the pages.
After searching for fixes again on this issue I did found the final solution which is a very nasty HTML fix. By applying the ‘scroll=”yes”‘ attribute to the tag I managed to fix the scrollbar issue finally. I know it is a very ugly solution but some times you have to do concessions on the quality of your code.
Having double scrollbar issues?
- Update jQuery to the latest stable release
- Apply the scroll=”yes” option to the body tag Example:
<body scroll="yes">The content.</body>
I hope someone will stumble up on this post when searching for your own IE6 scrollbar problem and maybe even fix it with the information in this post. Good luck!