The mysterious sideways jump, a.k.a. scrollbar present or not present
Just in the last couple of weeks, several clients have asked why their sites appear to jump a few pixels sideways when they navigate from one page to another.
The sideways jump appears on sites with horizontally centered layouts and is caused by the browser displaying a vertical scrollbar or not, depending on the height of the page. If you move from a short page that doesn’t need a vertical scrollbar to a tall page that does need one, the entire site is moved to the left to make room for the scrollbar. And vice versa, of course.
It isn’t a mystery or a bug, but simply the way most browsers work. As far as I know, the only browser that always displays a vertical scrollbar is Internet Explorer for Windows, version 7 and older. All other browsers I have checked in display it only when it is needed.
In other words, next time you see a site jump sideways a few pixels when you navigate from one page to another, keep an eye on the vertical scrollbar.
Update: Several readers have told me that you can use CSS to force a vertical scrollbar in other browsers than IE <= 7. I suppose that’s yet another trick to be aware of, but it would take an extremely persuasive client to make me use it.
- Previous post: Line wrapping text in legend elements
- Next post: Building accessible forms with WCAG 2.0