Power of Thought

Internet Explorer 6.0 for Windows, and Internet Explorer 5.0 for Mac have a bug that provides a horizontal scrollbar to pages residing in frames or popup windows, even when no horizontal scrollbar is needed. The cause is a flawed interpretation of the XHTML 1.0 transitional doctype.

To fix the problem, you may select the solution that fits you best.

Solution 1:

Paste the following code in your stylesheet:

html {
	overflow-y: scroll;
}

This forces the vertical scroller to be enabled by default, thus, for some reason, eliminating IE’s need for a horizontal one.

Pros:

• Fixes the problem completely, allowing you to keep your XHTML doctype intact

Cons:

• Forces the vertical scroller, even when it’s not needed. Be careful not to attach the stylesheet to, for instance, a frameset index.

Solution 2:

Paste the following code in your stylesheet:

html {
	overflow-x: hidden;
	overflow-y: auto;
}

This hides the horizontal scrollbar, and sets the vertical scrollbar to only be enabled when necessary.

Pros:

• Visually fixes the problem
• Doesn’t force a vertical scroller when it is not needed

Cons:

• Simply hides the horizontal scroller, doesn’t actually fix the problem. Thus, you may have content that will actually be located outside the page, where normally a horizontal scroller would be needed. It will be forcefully hidden.

Solution 3:

Paste the following code in your stylesheet:

body {
	margin-right: -15px;
	margin-bottom: -15px;
}

This adds a negative vertical and horizontal margin, the exact amount that IE adds, thus eliminating the artificial need for a scrollbar.

Pros:

• Visually fixes the problem
• Doesn’t force a vertical scrollbar

Cons:

• Doesn’t allow you to utilize the fill horizontal screen real estate, due to the “artificially created” 15px margin

I personally use, and would recommend, solution 1.

Forcing scrollbars

The techniques used to fix the bug in question, can also be used for other purposes. With CSS, you can forcefully show or hide both vertical and horizontal scrollbars in both Mozilla Firefox and Internet Explorer.

Forcefully enabling scrollbars:

html {
	overflow: scroll;
}

Forcefully disabling scrollbars:

html {
	overflow: hidden;
}

Hiding the horizontal scrollbar in IE:

html {
	overflow-x: hidden;
}

Hiding the vertical scrollbar in IE:

html {
	overflow-y: hidden;
}

Forcing the horizontal scrollbar in IE:

html {
	overflow-x: scroll;
}

Forcing the vertical scrollbar in IE:

html {
	overflow-y: scroll;
}

Forcing the horizontal scrollbar in Mozilla:

html {
	overflow:-moz-scrollbars-horizontal;
}

Note: This forces the horizontal scrollbar ONLY. This means even if a vertical scrollbar is necessary, it won’t appear.

Forcing the vertical scrollbar in Mozilla:

html {
	overflow:-moz-scrollbars-vertical;
}

Note: This forces the vertical scrollbar ONLY. This means even if a horizontal scrollbar is necessary, it won’t appear.

Adapted From: http://www.noscope.com/journal/2004/02/ie-horizontal-scrollbar-bug