Galerie
Webtechnik: 5 Tipps vom Profi - Verschiedene Browser: Nur eine Zeile CSS-Syntax verbessert die Anzeige.
Verschiedene Browser: Nur eine Zeile CSS-Syntax verbessert die Anzeige.
Tipp 1: Scrollbar-Platzhalter forcieren
Dieser Tipp zeigt ihn, wie Sie permanente Scrollbars erzwingen. Weitaus eleganter sind jedoch erzwungene Platzhalter für Scrollbars, falls eine Webseite auch mal komplett in das Browser-Fenster passt. So bleibt das Layout konsistent.
Scrollbars sind notwendig, je nach Länge des Inhalts einer Website. Es kann also sein, dass insbesondere bei großen Monitoren und einem weit aufgezogenem Browser-Fenster, sinnvollerweise keine Scrollbars sichtbar sind. Wird nun eine weitere Seite innerhalb der selben Homepage aufgerufen, bei der die Scrollbars aus Platzgründen wieder sichtbar sein müssen, hüpft gleichsam das gesamte Layout genau um die Breite der Scrollbar nach links oder wird etwas zusammen geschoben.
Der Internet Explorer oberhalb der Version 8 verfolgt von Haus aus die Strategie, solche Layout-Verschiebungen zu vermeiden: Er blendet für so einen Fall immer automatisch einen dezenten Platzhalter für die Scrollbar ein - Firefox und der IE 8 aber nicht. Mit einer einfachen einzeiligen CSS-Anweisung schaffen Sie Abhilfe.
Die elegante Methode nutzt die Syntax html { overflow-y: scroll; }, weniger empfehlenswert ist die Methode: html { height: 101%; }. Denn die schlechtere Methode setzt die Höhe der Website auf über 100 Prozent. Dadurch ist immer ein Scrollbalken sichtbar, auch wenn er, wie im Bildbeispiel des Internet Explorers, gar keinen Sinn macht.