Horizontal Scrollbar bug

author: Nikolaas De Geyndt | website: http://www.torn.be | category: XHTML |

Defining the bug

"Standard Compliance Mode", it sounds like sweet music in the ears of a web developer who empathises with web standards. Due to an insufficient implementation of those standards in browsers, things can get pretty messy. In this article I want to discuss the ugly horizontal scrollbars which appear when a document is trapped in frames. Even worse, it happens almost only when the document is coded and displayed in" Standard Compliance Mode".
The tab 'Page Info' in Mozilla gives you the rendering modus of the current document (Of couse there will be horizontal scrollbars if the content is explicitly larger than one screen can show. For example, this will happen with a 600 pixel wide table in a 200 pixel wide frame. This doesn't need an explanation.)

Zeldman to the rescue?!

There has to be a solution at hand, I believed. Webstandard guru Jeffrey Zeldman seemed to be the best place to start my quest. After some site searching I stumbled upon following declaration.
The horizontal scrollbars that appear in some browsers are caused by CSS bugs in those browsers, not by layout errors.
J. Zeldman is talking about, imho, about IE5/MAC. In that configuration it is indeed a CSS bug, even two. A discussion and solution for the horizontal scrollbar bug with IE5/MAC. But I suspect that with IE6/WIN the DOCTYPE can be blamed. As we'll later find out, IE6 improper web standard implementation is to be blamed. Worth an investigation.

Browser test

My test platform is Win32. Jeffrey Zeldman in mind I wondered if CSS has something to do with the mysterious horizontal scrollbar. Furthermore I compared any differences between "Standard Compliance Mode" and "Quirks Mode" (Document without a valid DOCTYPE).

V No horizontal scrollbars X Horizontal scrollbars

Compliance Mode Quirks mode
  CSS No CSS CSS No CSS
² XHTML 1.1 V V X X
XHTML 1.0 Transitional X X X X
XHTML 1.0 Strict X X X X
HTML 4.01 Transitional X X V V
HTML 4.01 Strict X X X X

¹ Opera 6, Netscape 6.2, Mozilla 1.2b showed no horizontal scrollbars, nor in Standard Compliance Mode nor in Quirks Mode.

² An XHTML1.1 document can begin with an XML declaration. Because IE6/WIN expects a DOCTYPE as the first line of code, the XML declaration is ignored and the document trips in Quirks Mode. In such case no horizontal scrollbars will show, but the nice thing is, you'll have a perfectly valid XHTML1.1 document.

Sigh, 20 different configurations, only 4 show no horizontal scrollbars if the document is trapped in frames. What to do with that? Internet Exploder is the most used browser in the world. This is a little disaster for web developers who like to code their documents according to W3C recommendations. One can only hope that the next version of IE will overcome this bug. Indeed, we can only hope, it's not a habit of M$ to take other's wishes into account.

As you can see there are no horizontal scrollbars in IE6/WIN in HTML4.01 Quirks Mode and XHTML1.1 SC mode. CSS appears to have no effect on triggering the bug. Lucky for us there exist a couple of solutions, so called hacks (it remain bugs though), which can help us out here.

The hacks

As I stated earlier, using an XHTML1.1 DOCTYPE declaration can do miracles. If there's an invalid or incomplete DOCTYPE on the very first line of an HTML web document IE6/WIN decides to display the document in Quirks Mode. Even comments on the first line (<!-- Comment in HTML -->) are not allowed.
The complete XHTML1.1 DOCTYPE declaration is: 
<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
In HTML overflow-x takes care, among other things, of the horizontal scrollbar, overflow-y takes the vertical one. 
{overflow-y: sOverflow}
With scripting such as Javascript the vertical scrollbar is addressed as such: 
object.style.overflowY [ = sOverflow ]
sOverflow can have following values:
visible Default. Content is not clipped and scrollbars are not added. Content is wrapped according to the size of the window or frame it resides in.

scroll Content is wrapped and scrollbars are added, even when the content does not exceed the dimensions of the object.

hidden Content exceeding the dimensions of the frame or window will not be shown.

auto Content is wrapped and scrollbars are only added if necessary.

Following code helps us getting rid of the horizontal scrollbars in IE5+/WIN: 
<style type="text/css">
<!--
html {
	overflow-x: hidden;
} 
-->
</style>
If you use this code in your web document you'll see that the horizontal scrollbars have disappeared. But the content that used to be visible thanks to the horizontal scrollbar lies now outside the viewing port of the frame or window. Other values for the overflow-x property are not very helpful either. We'll have to call upon the overflow-y property. This snippet of code gives us exactly what we want; gone horizontal scrollbars and all content is visible. 
<style type="text/css">
<!--
html {
	overflow-x: hidden;
	overflow-y: auto;
} 
-->
</style>
The overflow-x and overflow-y eigenschappen are supported since IE5 and only on IE. This is positive because it's a IE-only bug. But it does raise the question about these properties being part of the official CSS-specification... (Answer: they don't, only 'overflow' is)

Retrospect

I've struggled a long time with this bug. I was coding according to W3C recommendations, wasn't I? So what went wrong then? The W3C can't make but mere recommendations. Big browsers may follow these, but are not obliged. Luckily they're starting to understand that the W3C wants to lead the web to its full potential and that this only implies advantages. The answer to what causes this bug mustn't be searched within the vaults of the W3C, but within the loose and improper implementation of this technology in their browsers. Lucky for us there's a tight and ever-growing community (Evolt, Mozilla, developers mailing lists...) with an unprecedented hunger for perfection, that searchs and probes for working solutions and to make sure that the browsers are standing on the "bleeding edge of technology". It is up to these fierce advocates, often programmers on the payroll of large companies to persuade collegues about the great importance of (web) standards. They do a hell of a job... thumbs up!