nicht angemeldet
XHTML, IE und Scrollbars - wer will so wie ich will?
Nabend zusammen!
Ich bastel gerade an einer Seite, die (manchmal zu meiner eigenen Verwunderung) XHTML 1.0 - valide ist.
Nun habe ich leider das Phaenomen, dass alle Seiten die Scrollbars benoetigen (logischerweise weil sie zu lang sind zum darstellen auf einer Seite) im IE6 nicht nur die notwendige "rechten" Scrollbar haben, sondern die "untere" zum horizontal scrollen.
Es scheint so zu sein, als ob die Anzhal Pixel die gescrollt werden kann in Horinzontal-Richtung exakt der Breite der rechten Scrollbar entspricht.
Link zur Seite http://www.pixelundprint.de/dev/marienberge/
(z.B. Menupunkt Kontakt oder Jugendgruppen)
Firebird/Mozilla und Opera scheinen das (zumindest in meiner Testumgebung, WinXP) korrekt mit nur einer Scrollbar darzustellen.
Kennt jemand den Grund und (mir persoenlich wichtiger) einen Workaround, wie ich bei Beibehaltung des Designs den horizontalen Scrollbalken wegbekomme im IE?
Vielen Dank schonmal und schoene Gruesse,
Marc
-
Hallo,
Soweit mir bekannt ist, liegt das am fehlerhaften Box-model des IE.
Kommentier mal kurzfristig zum Testen alles vor <html> aus.
Workaround: lass im Doctype die Adresse der dtd weg, sodass nur noch
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
dasteht.Dieter
-
Hallo!
Vielen Dank fuer deine schnelle Amtwort.
Du hattest Recht, nach Auskommentieren des Doctypes gehts.Mein Doctype war:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">Dein Vorschlag:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
Eigentlich wollte ich schon strict lassen und irgendwie erinner eich mich, dass der IE ohne in den Quirks-Mode springt...
Das wollte ich eigentlich vermeiden.Gruss,
Marc-
Hallo,
Das sollte auch mit 'strict' gehen, mein Beispiel war das erstbeste was ich zum copy & paste finden konnte.
Dieter
-
Hallo Marc,
Du hattest Recht, nach Auskommentieren des Doctypes gehts.
Mein Doctype war:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">Dein Vorschlag:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
Eigentlich wollte ich schon strict lassen und irgendwie erinner eich mich, dass der IE ohne in den Quirks-Mode springt...
Das wollte ich eigentlich vermeiden.Genau das machst du aber durch das oben genannte Auskommentieren des Doctypes: den Quirks-Mode anschalten.
Im Übrigen löst jede XHTML-Dokumenttyp-Deklaration den standardkonformen Modus (den, in dem du die Fehler beobachtest) aus, auch XHTML 1.0 Transitional ohne DTD-Adresse.
Wenn du den Quirks-Mode unter Beibehaltung der Strict-Dokumenttyp-Deklaration anschalten willst, nutze einen leeren Kommentar <!-- --> davor oder eine XML-Deklaration, bspw. <?xml version="1.0" encoding="iso-8859-1" ?>.
Mathias
--
»The Web is the minimal concession to hypertext that a sequence-and-hierarchy chauvinist could possibly make.« (Ted Nelson)-
Hallo Mathias!
Genau das machst du aber durch das oben genannte Auskommentieren des Doctypes: den Quirks-Mode anschalten.
[...]
Wenn du den Quirks-Mode unter Beibehaltung der Strict-Dokumenttyp-Deklaration anschalten willst, nutze einen leeren Kommentar <!-- --> davor oder eine XML-Deklaration, bspw. <?xml version="1.0" encoding="iso-8859-1" ?>.Sehe ich das also richtig, dass das von mir beobachtete Verhalten nur dadurch im IE zu verhindern ist, dass ich den Quirks-Mode einschalte (Wie auch immer ich das dann tue)?
Das waere sehr schade, denn ich hatte das Ganze eigentlich so gebaut, um eben *nicht* den Quirks-Mode einzuschalten.
Gibts keine Moeglichkeit den horizontalen Scrollbalken weg zu bekommen ohne in den Quirks-Mode zu schalten?Gruesse,
Marc-
Hallo,
Gibts keine Moeglichkeit den horizontalen Scrollbalken weg zu bekommen ohne in den Quirks-Mode zu schalten?
Ja, über die CSS-Eigenschaft overflow-x von Microsoft (http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/overflowx.asp), welche wie overflow funktioniert, nur eben die Horizontale betrifft (overflow-y gibt's auch). Damit würde aber der rechte Dokumentrand lediglich beschnitten, sodass der Inhalt bis zum Framerand und, bei geringen Rändern, auch darüber hinaus ging und abgeschnitten werden würde. Daher müsste man mit vergrößerten Rändern arbeiten, welche dann problemlos abgeschnitten werden können und gleichzeitig die Ränder stimmig bleiben, das habe ich unter [pref:t=64417&m=366478] beschrieben.
Mathias
--
»The Web is the minimal concession to hypertext that a sequence-and-hierarchy chauvinist could possibly make.« (Ted Nelson)-
Hallo.
Ja, über die CSS-Eigenschaft overflow-x von Microsoft
Was denn nun, CSS oder MS? ;-)
MfG, at
-
-
-
-
-
-
Hallo Marc,
Ich bastel gerade an einer Seite, die (manchmal zu meiner eigenen Verwunderung) XHTML 1.0 - valide ist.
Nun habe ich leider das Phaenomen, dass alle Seiten die Scrollbars benoetigen (logischerweise weil sie zu lang sind zum darstellen auf einer Seite) im IE6 nicht nur die notwendige "rechten" Scrollbar haben, sondern die "untere" zum horizontal scrollen.
Es scheint so zu sein, als ob die Anzhal Pixel die gescrollt werden kann in Horinzontal-Richtung exakt der Breite der rechten Scrollbar entspricht.Da gibt es meines Wissens keinen Workaround. Es lässt sich lediglich mit overflow-x:hidden und rechts vergrößerten Dokumenträndern arbeiten. Diese darf nur der MSIE 6 erhalten, wie gesagt. Das ließe sich wahrscheinlich über diverse Dreischritt-CSS-Hacks lösen, die zuerst MSIE 5.x von 6 trennen und dann noch einmal MSIE 6 von Gecko und Opera:
html {
margin:0;
padding:0;
overflow-x:hidden; /* Nicht valide, sollten aber von anderen Browsern problemlos ignoriert werden. */
}
body {
margin:10px; /* Für MSIE <6/Win, MSIE <5/Mac, Opera <6, KHTML. */
ma\rgin:10px 30px 10px 10px; /* (Gedacht) für MSIE 6. Andere Browser, die diese Regel verstehen und die nächste Regel nicht, haben halt Pech(tm). */
padding:0;
}
html>body {
margin:10px; /* Für alle Geckos, Opera >5 und IE 5/Mac. */
}Eine valide Variante mit Conditional Comments (http://msdn.microsoft.com/workshop/author/dhtml/overview/ccomment_ovw.asp):
<style type="text/css">
html,body {margin:0; padding:0;}
html {border:1px solid red;}
body {border:1px solid blue; margin:10px;}
</style>
<!--[if gte IE 6]>
<style type="text/css">
html {overflow-x:hidden;}
body {margin-right:26px;}
</style>
<![endif]-->Den zweiten Teil des Codes soll nur MSIE 6 zu Gesicht bekommen. Dort wird das vertikale Scrollen rigoros ausgeschaltet und der Abstand korrigiert und um die durchschnittliche Breite einer Scrollleiste verbreitert (der Wert ist letztlich an den Haaren herbeigezogen, wahrscheinlich wären 20px Aufschlag in manchen Fällen immer noch zuwenig).
Solche Hacks sind allerdings nicht nachhaltig bzw. zukunftssicher, weil folgende MSIE-Versionen wieder anders reagieren können, mit <!--[if gte IE 6]> ... ließe es sich zumindest auf 6.x begrenzen, aber das ist letztlich nicht sicherer.
Wie gesagt, die andere Möglichkeit wäre, MSIE 6 in den Quirks-Modus zu zwingen.
Mathias
--
»The Web is the minimal concession to hypertext that a sequence-and-hierarchy chauvinist could possibly make.« (Ted Nelson)-
Hallo Mathias!
Eine valide Variante mit Conditional Comments (http://msdn.microsoft.com/workshop/author/dhtml/overview/ccomment_ovw.asp):
[...]Solche Hacks sind allerdings nicht nachhaltig bzw. zukunftssicher, weil folgende MSIE-Versionen wieder anders reagieren können, mit <!--[if gte IE 6]> ... ließe es sich zumindest auf 6.x begrenzen, aber das ist letztlich nicht sicherer.
Also erstmal Danke! Dieser Hack funktioniert wunderbar, genau wie ich ihn brauche.
Dass sowas nicht sauber ist und nicht zu empfehlen ist, merkt man ja schon an Namen: "Hack".
Um die Zukunft mach ich mir da gerade keine Sorgen, denn wenn die naechste IE-Version rauskommt, werd eich das eben korrigieren. :-)Gruss,
Marc
-