I work very often with digital artists and other creative people who are now investing their talents designing web sites. I am always eager and pleased to offer my expertise in web development to help those clients of mine convert a masterpiece crafted in Photoshop, Illustrator or Fireworks into full-blown web templates ready for text copy.
Very often after I am done doing my part and transfered all the web files to the client , I receive an email/ phone call a day or so later inquiring why some pages jump in web browser.
The very first thing the client blames is the current web browser s/he is using, and why not? Then after opening all the major web browsers at his disposition he realizes the issue remains the same on all browsers.
Now, may be I am the one who screwed up!
Nope!!
In all cases it’s because web pages have different amount of content some longer than others. When a web page is long enough to exceed the web browser’s height then a vertical scroll bar appears. If on the other hand the web page only has a small amount of copy, everything is shown above the fold and no vertical scroll bar is needed by the web browser.
Cause :
When using a fixed width layout with the left and right margins set to auto on your main container (#wrapper) , your web pages will be horizontally centered. The horizontal position of your web page depends on the available width in your web browser viewport.
Let’s assume your browser window is 1024 pixels wide and that you have set your page layout to a fixed width of 980 pixels to be horizontally centered.
- If a page copy is concise the entire page can be shorter than your browser window’s height. In this case no vertical scroll bar is necessary. You web page will therefore have a left and right margin of roughly (1024-980)/2, that is about 22 pixels on each side.
- Now left assume another web page has a lot of text copy. In this case the page height to exceeds the web browser’s window height. A vertical scrollbar appears therefore cutting down on the width of the browser’s viewport.
The width of the scrollbar is about 20 pixels, so we are now left with only 1004 px (pixels).Using the same formulas as above (1004-980)/2, yields 12 pixels for the left and right margin for this web page. That’s what creates a 10px horizontal shift to the left when you navigate from short (no vertical scrollbar) to a longer page where the vertical scrollbar is required.
Solution:
To solve the issue we are facing the solution is to force the web browser to display the vertical scrollbar on every page no matter how much content there is in there.
- - Option 1
Using the ‘min-height” CSS property to set a minimum height of your main container to match that maximum browser window height of your target audience.The problem is you do not yet have that information yet you review your web analytics after your site went live.
However from a personal experience, I found that setting the min-height to 1000px will generally do the trick. The only hiccup is the ”min-height” CSS property is not understood by IE6. Therefore users using that version of Internet Explorer will experience the horizontal page shift.
- - Option 2
Add a just enough line breaks (Shift+Enter) or empty paragraphs (Enter) after the content on pages with less copy.
Choose whichever option is more suitable to your design and target audience.
I’ll go for option 2 for the time being until IE6 disappears from the web landscape.
Does it really matter if a web page shift just a few pixels. For most people, it doesn’t. heck, most site visitors will even notice or be bothered by it.
But it’s a great deal for digital artists. Graphic designers are a different breed. A graphic designer will “fight you” tooth and nail for 1 pixel and for a good reason. That doesn’t mean visual artists are very difficult people to work with, on the contrary. They just thrive for perfection.
