„Unsere Website springt, bitte reparieren.“ (Update)

Ich habe immer wieder Kunden, die mit diesem Satz zu mir kommen – mitunter höre ich ihn von der selben Agentur sogar mehrfach, wenn mal ein Mitarbeiter gewechselt hat.

Das Problem:

Beim Navigieren zwischen verschiedenen Unterseiten einer Website „springen“ Header, Menüs, Footer usw. manchmal horizontal hin und her.

Die Erklärung:

Navigiert man von einer Seite, die von der Höhe her komplett in das Browserfenster passt, zu einer Seite, die nicht ins Fenster passt, erscheint notgedrungen rechts außen ein Scrollbalken – irgendwie muss man ja an die verborgenen Inhalte gelangen. Da sich durch den zusätzlichen Scrollbalken die Gesamtbreite des Fensters aber nicht verändert, wird der Bereich des Fensters, der für den Inhalt zur Verfügung steht, zwangsläufig um die Breite des Scrollbalkens, der innerhalb des Fensters erschienen ist, schmaler.

Handelt es sich nun um eine zentrierte Seite, rutscht der gesamte Inhalt einschließlich Header, Footer usw. automatisch (und mathematisch korrekt) um die Hälfte der Breite des Scrollbalkens nach links – was sich leider nicht vermeiden lässt.

Interessanterweise sieht man dieses Verhalten beim Internet Explorer nicht. Dort ist der Scrollbalken nämlich – sozusagen prophylaktisch – immer vorhanden, auch wenn er gar nicht benötigt wird.

Update

Mittels der CSS3-Eigenschaft overflow-y gibt es zum ersten Mal die Möglichkeit, einen ständigen Scrollbalken zu erzwingen, der, wenn er nicht benötigt wird, inaktiv dargestellt wird; siehe auch Kommentare. Beispiel: Digimage