Browser: Unterschiede bei Scrollbalken
Nach obenProblem
Im Gegensatz zum IE zeigt der Mozilla den vertikalen Scrollbalken nur an, wenn der Seiteninhalt grösser dem Anzeigefenster ist. Der IE zeigt hier standardmässig einen schmalen Streifen als Platzhalter am rechten Fensterrand. Dadurch zuckt das Bild beim Klicken von Seiten mit vertikal unterschiedlich langem Inhalt.
Nach obenÜberlegung
Es gibt nun einen Trick der dies vereinheitlicht: Man lässt im Mozilla standardmässig den Scrollbalken immer anzeigen.
Nach obenLösung
Um den Scrollbalken auch im Mozilla standardmässig anzeigen zu lassen, definieren wir im CSS die Seitenhöhe als mindestens 101%. Wir können in diesem Fall auf das Attribut min-height zurückgreifen, das der IE nicht interpretiert, da dieser ja für den Scrollbalken standardmässig einen Platzhalter anzeigt.
html {
min-height: 101%;
}
Mit dieser Methode bleibt im IE der Platzhalter für den Scrollbalken erhalten und im Mozilla wird der Scrollbalken angezeigt. So zuckt die Seite nicht mehr, wenn man von einer zwischen Seiten mit vertikal unterschiedlich langem Inhalt hin- und herklickt. Andererseits empfinden manche diesen "unnötig" angezeigten Scrollbalken im Mozilla als unschön.
Nach obenBemerkung
Getest habe ich diese Varianten mit dem IE6, FF1.0.4, Opera 7.54 und 8 sowie dem Netscape7.1. Über Kommentare, ob diese Varianten auch in anderen/älteren browsern funktionieren, würde ich mich freuen.
q-rios
Netter Trick, aber wer benutzt den ^^.
Ich bin froh wenn ich rechts nich ständig den Scrollbalken seh vorallem wenn man ihn nicht brauch.
greetz
Twisting
Ich !!
...ne Quatsch, es gibt aber bestimmt einige Leute, die sowas benutzen würden :)
pippilotta
Bei sehr bunten Seiten (wie ich sie besonders mag) kann das Zuckeln durch Scrollbalken anzeigen und nicht anzeigen, schon ganz schön nerven :-)
fphilipe
Bei 101% ist die Seite scrollbar. Wenn man einen kleineren Wert nimmt wie z.B. 100.1% wird der Balken ebenfalls angezeigt aber dann ist die Seite wie im IE nicht scrollbar.
Eine Alternative dazu wäre overflow: scroll; Der Nachteil ist, dass horizontale Scrollbalken angezeigt werden.
pippilotta
Bei overflow: auto im body/html spielt der Netscape nicht mit. Mit den kleineren als 101% hatte ich in älteren Opera-Versionen Probleme. overflow:scroll ist keine erwähnenswerte Alternative für mich durch den horizontalen Scrollbalken ...
arc
in Safari 2.0 (khtml engine) verhält sichs auch mit dem workaround weiterhin wie in mozilla...
pippilotta
Ich hab leider überhaupt keine Möglichkeit irgendwas für Mac oder auch Linux zu testen :-( Sorry. Werd mich aber nochmals hierfür schlau lesen, zwecks Verhalten ...
fphilipe
Was auch geht und meiner Meinung nach besser ist: html { height: 100%; margin-bottom: 1px; }
Marcel
also diese Variante würde ich bevorzugen: overflow-y:scroll;
fphilipe
@ Marcel:
overflow-y ist nicht in CSS enthalten. Es ist eine nicht valide CSS Anweisung von Microsoft.
scruff
wie sieht es denn mit body {
overflow: -moz-scrollbars-vertical;
}
aus?
funzt in mozilla-browsern wunderbar und wird im IE ignoriert.
Primelsetzer
Sehr netter Trick, hab schon lange danach gesucht, da es total nervig ist in CMS-systemen wie Mambo oder Joomla, dass der content abhängig von der Seitenlänge immer hin und her hüpft! Also besten Dank!!!!!!