internet || visuelya.de || keep passing the open windows

Die Herpes des Webdesigns

"...horizontal scroll bars are the herpes of web development, never quite going away, but still treatable." (Dan von inmyexperience.com)

Immer mal wieder dasselbe Problem: Im Internet Explorer 6 tauchen in Framesetseiten (auch bei iFrames) Querscrollbalken auf, sobald vertikale Scrollbalken vorhanden sind. Es gibt auf der Seite keine (überbreiten) Inhalte, die den Querscrollbalken rechtfertigen. Das Phänomen taucht nur im standardkonformen Modus des IE6 auf.

Der IE6-Scrollbalken-Bug / Ursachen

Der W3C-Standard für die verfügbare Fläche eines Dokuments, das alle anderen Elemente enthält, ist das html-Element. In älteren Versionen des Internet Explorers (und im Quirks-Modus) wird hingegen "body" als die verfügbare Fläche eines Dokuments definiert. Bei IE greifen an dieser Stelle auch proprietäre html-Attribute wie "scroll". Man kann nur vermuten, daß die Scrollbar-Problematik hier ihre Ursachen hat - die Breite der verfügbaren Fläche wird bei Zuschalten des vertikalen Scrollbalken nicht korrekt berechnet und dadurch die horizontalen Scrollbalken eingeblendet.

Lösungsansätze mit dem Quirks-Modus

Umschalten des Dokumenttyps

Eine zunächst einfach scheinende Lösung liegt in der Verwendung eines doctypes (für die einzelne Frameseite), die den IE aus dem standardkonformen ("standard-compliants mode") in den so genannten Quirks-Modus schaltet: statt

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/transitional.dtd">

wird

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 transitional//EN">

verwendet. Auf diese Weise ist diese Problem zunächst schnell behoben. Nachteil: nach Umschalten des doctypes interpretiert der IE6 auch alle CSS-Eigenschaften auf seine "alte", nicht standardkonforme Weise. Bei etwas komplexerem CSS, das auf das Box-Modell setzt, tauchen neue Darstellungsprobleme auf, die mit dem speziellen IE-Box-Modell zu tun haben. Da dieses Box-Modell jedoch - um die Explorer der 5er-Generation zu bedienen - sowieso bei der Entwicklung des Stylesheets berücksichtigt werden muß, ist die "Quirks"-Lösung nicht völlig von der Hand zu weisen.

Nutzung des XHTML 1.1-doctypes

Nikolaas De Geyndt empfiehlt auf torn.be die Verwendung des Doctypes für XHTML 1.1:

<?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">

Durch die xml-Deklaration in der ersten Zeile des Dokuments ignoriert der IE den Doctype, und schaltet wieder auf Quirks-Modus um - ohne Scrollbars. Dies hat immerhin den Vorteil, daß mit einem sauberen XHTML-Dokumenttyp gearbeitet werden kann und das Dokument vollständig valide ist. Auch hier wird der IE jedoch das Box-Modell auf seine Weise verstehen (s.o.).

Lösungsansätze mit proprietärem Code

Das CSS-Attribut "overflow-x" bzw. "overflow-y" ist Microsoft-proprietär, wird also nur vom Internet Explorer interpretiert:

<style type="text/css"> html {overflow-x:hidden;} </style>

schaltet den horizontalen Scrollbalken ab. Damit ist der CSS-Code jedoch nicht mehr valide. Zu beachten ist, daß im standardkonformen Modus dieses Attribut dem html-Element zuzuweisen ist, nicht dem body-Element.

Lösungsansätze mit standardkonformem Modus

Etwas unschön, aber simpel:
html {overflow:scroll;}

Mit dieser css-Anweisung wird der Scrollbalken immer, auch bei kürzerem Inhalt, angezeigt. Der Querscrollbalken erscheint jedoch nicht. Auch hier gilt: das Attribut overflow ist auf das html-, nicht das body-Element anzuwenden.

Conditional comments mit overflow-x kombinieren

Die bislang eleganteste Methode, noch dazu valide, ist die Kombination des o.g. overflow-x Attributs mit den sog. "conditional comments", ebenfalls eine Microsoft-proprietäre Browser-Erkennungs-Methode, die jedoch den Vorteil hat, innerhalb von html-Kommentarzeichen zu stehen und damit von anderen Browsern und dem Validator komplett ignoriert zu werden. Das sieht dann so aus:

<style type="text/css"> html,body {margin:0; padding:0;} html {background-color:blue;} body {border:1px solid blue; margin:10px;} </style>



Hier werden im zweiten Teil ausschließlich für IE6+ die notwendigen Eigenschaften zum Verhindern des Scrollbars notiert. Hier wird neben overflow-x noch der rechten Rand (margin-right) um die ungefähre Breite des Scrollbalkens verbreitert. Molily, der diese Variante im selfforum beschrieben hat, schreibt jedoch ganz zu recht: "Solche Hacks sind allerdings nicht nachhaltig bzw. zukunftssicher, weil folgende MSIE-Versionen wieder anders reagieren können [...]".

Mehr zu condtional comments gibt's bei msdn.microsoft.com

Quellen

Der Inhalt dieser Seite ist das Ergebnis der Recherche in Foren und Weblogs. Einige Kollegen haben intensive Experimente und Forschungsarbeit geleistet, um der Ursache des Problems auf die Spur zu kommen. Auch wenn das allgemeine Credo lautet: "eindeutig erklären kann man es nicht", so führen einzelne Arbeiten sehr weit in das Problem ein.

Peter-Paul Koch von evolt.org analysierte den Zusammenhang der Elemente html und body mit und ohne doctype und präsentiert detaillierte Beispielseiten.

Nikolaas De Geyndt hat auf torn.be eine schöne Tabelle erarbeitet, in der er das Auftauchen der Scrollbars mit verschiedenen doctypes, mit und ohne Verwendung von CSS und mit Quirks-Modus analysiert.

molily (molily.de) hat im selfforum auf die Lösung mit den conditional comments hingewiesen und dazu noch einen fiesen und nicht validen CSS-Hack vorgestellt, den ich hier nicht vertieft habe.

Schließlich gibt es die "CSS-Enhancements" in der MSDN-Library, die uns auch noch einmal genau zeigen, welche Einstellungen in der Dokumenttyp-Deklaration welchen Einfluß auf den Darstellungsmodus haben. Hier gibt es auch eine sehr anschauliche Grafik des unterschiedlich interpretierten Box-Modells.

Eine ganz andere, bizarre Ursache für horizontale Scrollbalken wurde auf Simon Willisons Weblog vorgestellt: kursive Schrift! Eine Lösung dazu zeigt John Potter auf seiner Seite.

elya · 31.01.2004