About communication

(EN) It’s things like these that make you realize that you’ve spent too much time in front of your screen: today I was coding a new website and had duplicated the already existing homepage in order to create other pages than the start page and I had filled them with some content

Clicking myself from page to page of this new website I realized that some pages seemed to jump from left to right and back. Was this another css-problem with “float”? It also changed from browser to browser… I tried back and forth and couldn’t find where the bug was.

The best thing you can do in such a situation is to go and take a break. So I sat down with some yummy lunch and thought of something completly different.

When I got back to the computer, I tested the pages again. And tadaa – suddenly the solution was right there: it wasn’t the content of the website jumping. The effect was caused by the scrollbar!

Some pages were just shorter than the screen while others needed scrolling. Therefore jumping from a page without scrollbar to a longer page with scrollbar created the look of a page jumping to the left:

But in fact it was only the presence or absence of the scrollbar that had this effect to the website! You don’t realize it though if you focus your view on the content and not on the complete screen.

What can you do?

You can of course leave it like that and don’t care. But if you are a perfectionist like me you want all the pages to be in the same position.

Here’s the solution:

When calibrating the website in the css-file, add the following to it:

html {height:101%}

This will make your website have a scollbar no matter how much content it has and thus prevent the website from “jumping”.

Den Scrollbalken nicht vergessen!

(DE) Das sind die Dinge, die einem anzeigen, dass man zu lange vor dem Bildschirm gesessen hat: heute habe ich an einer neuen Website gearbeitet und hatte gerade die schon vorhandene Startseite dupliziert, um weitere Seiten damit zu bauen, und hatte diese mit ein wenig Inhalt gefüllt.

Als ich mich nun von Seite zu Seite klickte, bemerkte ich, dass manche Seiten von links nach rechts und zurück zu springen schienen. War das wieder ein css-Problem mit “float”? Der Effekt war auch von Browser zu Browser unterschiedlich… Ich versuchte alles mögliche, konte den Fehler aber nicht finden.

Das Beste, was man in so einer Situation machen kann, ist eine Pause. Also machte ich mir erst einmal ein leckeres Mittagessen und dachte an etwas völlig anderes.

Als ich wieder zurück an den Computer kam, testete ich die Seiten noch einmal. Und Tadaa – plötzlich war die Lösung ganz einfach: es war nicht der Inhaltsbereich, der da hin und her sprang. Der Effekt wurde vom Scrollbalken hervorgerufen!

Manch Seiten waren einfach kürzer als der Bildschirm, während andere Scrollen nötig machten. Deshalb erweckte das Wandern von einer Seite ohne Scollbalken zu einer Seite mit Scrollbalken den Eindruck, als würde der Inhaltsbereich nach links springen:

In Wirklichkeit war es aber nur die An- oder Abwesenheit des Scrollbalkens, die diesen Effekt auslöste! Wenn man sich aber optisch auf den Inhalt konzentrierte, statt den ganzen Bildschirm im Blick zu haben, bemerkt man das einfach nicht.

Was kann man dagegen tun?

Man kann es natürlich einfach so lassen und sich nicht darum scheren.Aber wenn man wie ich ein Perfektionist ist, wird man wollen, dass alle Seiten gleich aussehen.

Hier also die Lösung:

Beim Kalibrieren der Website in der css-Datei muss folgendes hinzugefügt werden:

html {height:101%}

Das bewirkt, dass die Website immer einen Scrollbalken hat, egal wie hoch der Inhaltsbereich ist. So wird verhindert, dass die Seite “springt”.