Friday, July 4, 2008

Short webpage jitter / jumping fix

I was working on the Holly Cottage bed & breakfast website a few days ago and discovered that the website contains both web pages that are bigger than the browser's viewable client area and ones that are smaller than the browser's viewable client area.

This is common on a lot of websites and makes the website jitter in most browsers - Firefox, Opera, Safari etc - when going from a long page to a short page. This is because these browsers only add a page scrollbar if the page is longer than the client area.


I have a little fix that I use as standard to fix this problem: I set the html tags to a height of 101%.

Here is the CSS:
html
{
height: 101%;
}

A simple and easy solution that works for all the major browsers!

Here is the Holly Cottage B&B website with the fix applied:

No comments: