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