These pages examine and suggest some workarounds for the horizontal scroll bar bug in Microsoft Internet Explorer 6.0. The basic information has been written for inexperienced web designers, but there is also a detailed analysis for others who want full technical information. The workarounds are for all levels of knowledge.
All the files and examples are available on the downloads page.
All the pages used here have passed the HTML validation services of the World Wide Web Consortium.
In certain situations, Internet Explorer 6.0 on Windows displays a horizontal scroll bar even though this is totally unnecessary for the page. (Read a technical discussion of the circumstances.) In general terms, it happens when these 3 conditions all occur:
For example, this page displays correctly on its own, but not from within a frameset.
I usually run with a screen resolution of 800 x 600. The last condition means that the lower the resolution, the more frequently the bug will show up.
A horizontal scroll bar is very undesirable in web design because it is tedious for the reader to scroll back and forth on every line.
In general using frames is not a good web design practice either. However, low-cost domain name packages often work by using a frameset which points to a site hosted on another web server. I first came across and started investigating the bug in this context.
Even if your site does not use frames, the problem could occur when another site links to your site from within their frameset.
A workaround is a solution which allows you to get round a bug. From my research, I have come across 5 reasonable workarounds for this problem.
If you're interested, read the full evaluation.
Solutions 1 to 3 are for designers whose pages are forced into a frameset, for example because their domain name is managed using 'cloaked forwarding'.
Solution 4 is suitable if you are using frames on your own site.
Solution 5 is recommended if your site has no frames, but you want to protect against the situation when another site opens your pages in their frame.
This solution reduces the width of the body (the screen area in which text etc are displayed) by 20 pixels. The explanation and code are on the HowToCreate website under the heading HTML layout changes.
This solution works by preventing the horizontal scroll bar from appearing. The explanation and stylesheet are on Torn Systems' website.
This solution was suggested by someone on a newsgroup. Like solution 1, it works by reducing the width of the body. The width is set to a percentage value (94%) rather than a number of pixels. In order to slightly improve the display of the text on the page, I also recommend adjusting the left-hand margin.
Using a stylesheet, this would be done as follows:
body { width: 94%; margin-left: 1.8% }
Set scrolling="yes" on the <frame> tag. In many browsers, including Internet Explorer, this works exactly as we want and a horizontal scroll bar is only added when it is necessary. However, this is not standard behaviour. Be warned that in browsers which do comply with the standards, it may therefore look less good.
This uses JavaScript to test whether the page has been opened inside a frameset. If it has, it moves the page to be at the top level so it is no longer within the frame.
Sometime, I intend to add details of how to apply the solutions to your own web pages, written for inexperienced web designers.
At the time of writing (September 2003), Internet Explorer 6.0 is a very widely-used browser on Windows PCs. Version 6.0 has not been released for Macs.
As far as I know, this bug only occurs in Internet Explorer 6.0. It remains to be seen whether Microsoft will fix the bug in version 6.1.
PC screen widths vary from 640 x 480 to 1600 x 1200 and higher. Many web designers seem to be unaware of how many users still have a screen at a resolution of 800 x 600.
Read a more detailed explanation of when the bug occurs and other solutions.
Note: The frameset pages which are used here are made up of 2 frames. This is because of a bug in Netscape 4 - when there is only one frame, nothing is displayed.
Nothing on this page is copyright. Please feel free to make use of it. I would appreciate if you would use a comment to acknowledge me as your source, or add a link to my URL. Example comment:
<!-- IE 6.0 bug fix information taken from http://www.gailtb.me.uk -->
With thanks to the following:
http://www.torn.be/kazza/tutz/xhtml/4/xhtml_hor_scrlbar_results_en.html - Nikolaas De Geyndt at Torn Systems for solution 2 and a lot of information about quirks mode, etc
http://www.eigengrau.com/blog/archives/000039.html - Jack Letourneau at eigengrau.com for the insight that this bug is linked to the vertical scroll bar
http://www.howtocreate.co.uk/ie6pita.html - Mark Wilton-Jones at HowToCreate for solution 1
http://www.webreference.com/tools/browser/javascript.html - JavaScript browser sniffer by Eric Krok, Andy King and Michel Plungjan
Please if you have any comments on this site or further information about this bug.
Please note I am not a professional web designer.
Written and researched by: Gail Treves-Brown
Last updated on: 20 Sept 2003
Still to do: