 SELFHTML aktuell Artikel HTML/XHTML | |
 |
HTML/XHTML:
|
 |
|
 | |
| E-Mail: |  visu.elya@web.de |
|---|---|
| Homepage-URL: |  http://www.visuelya.de |
Bei Fragen zu diesem Beitrag bitte die Autorin des Beitrags kontaktieren!
Im Internet Explorer 6 werden in Frameseiten (auch bei eingebetteten Frames), sobald der Seiteninhalt länger als die Framehöhe wird, zusätzlich zu den vertikalen auch horizontale Scrollbalken eingeblendet. Es gibt auf der Seite keine (überbreiten) Inhalte, die diesen Querscrollbalken rechtfertigen. Das Phänomen taucht nur im standardkonformen Modus des Internet Explorers auf. In diesem Artikel werden verschiedene Lösungsansätze vorgestellt.
Anzeigebeispiel: So sieht's aus
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Problemframe</title>
<style type="text/css">
<!--
body {background-color:#F0CB92;
color:#000;
}
-->
</style>
</head>
<body>
<h1>Willkommen</h1>
<p>[...]</p>
</body>
</html>
Diese korrekte HTML-Seite mit vollständiger Dokumenttyp-Angabe inklusive der Web-Adresse zur Dokumenttyp-Definition (DTD)
"http://www.w3.org/TR/html4/loose.dtd" veranlasst den Internet Explorer 6, seinen Darstellungs-Modus auf "standard compliant"
– also standardkonform – zu schalten. Innerhalb des Framesets oder eines eingebetteten Frames erscheinen in diesem Modus die horizontalen Scrollbalken.
Die CSS-Spezifikation des W3C unterscheidet bei der Darstellung eines Dokuments zwischen dem so genannten Viewport, also der eigentlichen im Browser sichtbaren Fläche,
und einer theoretischen, den Viewport noch umschließende Fläche, dem Canvas. Die Browser bieten den Benutzern einen Viewport, ein Fenster auf dem Bildschirm.
Das Wurzelelement des Dokumentbaums (also das <html>-Element) erzeugt eine Box (den Canvas), die als umschließender Ausgangsblock für
die Darstellung des Dokuments dient. Ist der Viewport kleiner als der umschließende Ausgangsblock des Dokuments, sollte der Browser Scrollbalken anbieten.
Allerdings führen die verschiedene Interpretationen der Browser zwischen <html> und <body> als Canvas auch zu
unterschiedlichen Darstellungen.
Man kann nur vermuten, dass hier auch die Ursache des Fehlers im Internet Expoler 6 zu suchen ist, da die beiden Elemente im Elementbaum für diesen Browser nicht korrekt aufeinander abgestimmt zu sein scheinen.
Anzeigebeispiel: So sieht's aus
Die einfachste Lösung liegt in der Verwendung eines Dokumenttyps (für die einzelne Frameseite), die den IE aus dem standardkonformen 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 ("Doctype Switch"). Auf diese Weise ist das Problem schnell behoben. Nachteil dieser Lösung: nach Umschalten des Dokumenttyps interpretiert der Internet Explorer 6 auch alle CSS-Eigenschaften auf seine "alte", nicht standardkonforme Weise. Wurde im CSS das proprietäre Box-Modell für ältere Internet Explorer nicht berücksichtigt, tauchen neue Darstellungsprobleme auf. Da zur Zeit beim Erstellen eines Stylesheets die Internet Explorer der fünften Generation jedoch noch miteinbezogen werden (sollten), ist diese Lösung durchaus brauchbar. Das Dokument ist auch ohne die Angabe der Web-Adresse zur Dokumenttyp-Definition valide.
Anzeigebeispiel: So sieht's aus
Wer Wert auf eine vollständige XHTML-Dokumenttyp-Angabe legt, kann den XHTML 1.1-Dokumenttyp verwenden:
<?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">
Der Internet Explorer erlaubt im standardkonformen Modus in der ersten Zeile eines (X)HTML-Dokuments ausschließlich eine Dokumenttyp-Angabe wie
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN";>. Durch Hinzufügen der XML-Deklaration in der ersten Zeile des Dokuments
ignoriert der Internet Explorer den gesamten Dokumenttyp und schaltet wieder auf Quirks-Modus (ohne horizontale Scrollbalken) um. Dies hat zwar den Vorteil,
dass mit einem sauberen XHTML-Dokumenttyp gearbeitet werden kann und das Dokument vollständig valide ist – doch wird der Internet Explorer das
Box-Modell auch hier auf seine alte, proprietäre Weise interpretieren.
Anzeigebeispiel: So sieht's aus
Die CSS-Eigenschaften overflow-x bzw. overflow-y sind proprietäre Erweiterungen von Microsoft,
sie werden also nur vom Internet Explorer interpretiert.
Die Anweisung html {overflow-x:hidden;} im CSS-Stylesheet schaltet den horizontalen Scrollbalken (immer!) ab. Damit ist der CSS-Code jedoch nicht
mehr valide. Zu beachten ist, dass im standardkonformen Modus diese CSS-Eigenschaft dem html- und nicht dem body-Element zuzuweisen ist.
Anzeigebeispiel: So sieht's aus
Eine der zur Zeit elegantesten Methoden ist die Kombination der oben gezeigten overflow-x-Eigenschaft mit den so genannten Conditional Comments.
Diese sind eine proprietäre Methode von Microsoft zur Browsererkennung, die jedoch den Vorteil hat, dass sie innerhalb von HTML-Kommentarzeichen stehen und
somit von anderen Browsern und dem Validator ignoriert werden. Das Dokument bleibt valide:
<style type="text/css">
html,body {margin:0; padding:0;}
html {background-color:blue;}
body {border:1px solid blue; margin:10px;}
</style>
<!--[if gte IE 6]>
<style type="text/css">
html {overflow-x:hidden;}
body {margin-right:28px;}
</style>
<![endif]-->
Die hier im zweiten Teil notierten CSS-Eigenschaften verhindern hier – und zwar ausschließlich für den Internet Explorer 6+ – die
Anzeige des Scrollbalkens. Im gezeigten Beispiel wird neben overflow-x noch der rechte Rand margin-right um die ungefähre Breite
des Scrollbalkens vergrößert (diese kann unter verschiedenen Windows-Betriebssystemen (XP, Windows 2000) durchaus schwanken). Aber Vorsicht, es
handelt sich hier um einen so genannten "Hack", der möglicherweise nicht zukunftssicher ist, weil heute noch niemand weiß, wie sich zukünftige
Versionen des Internet Explorers verhalten werden. Weitere Informationen zu Conditional Comments gibt es auf der Website von Microsoft:
About Conditional Comments.
Vorsicht ist ebenfalls geboten, wenn man sich die Option überbreiter Inhalte bei einzelnen Seiten offen halten will. Die Lösungen mit
overflow-x schalten den horizontalen Scrollbalken in jedem Fall ab und machen so überbreite Seiteninhalte für den Benutzer
möglicherweise nicht erreichbar.
Die folgenden Stellen wurden für die vorgestellten Lösungsansätze als Quellen herangezogen und bieten weiterführende Lektüre zum Thema:
SELFHTML: Dokumenttyp-Angaben
Carsten Protsch: Der DOCTYPE-Switch und seine Auswirkungen
Doctypes and their respective layout mode
evolt.org: Zusammenhang der Elemente html und body mit und ohne Dokumenttypangabe und mit detaillierten Beispielseiten
torn.be: Horizontal Scrollbar bug, ausführliche Darstellungsanalyse
SELFHTML-Forumsarchiv: Molilys Beispiel der Conditional Comments mit einem weiteren, nicht validen Hack
MSDN Library: CSS Enhancements in Internet Explorer 6 (grafische Darstellung des Box-Modells)