Have you ever been to a website where the pages shift when navigating from one page to another? The author of a particular site may have done an incredible job of designing a world-class theme, but the ocassional page shift can be a cause of irritation to some including myself. So, what causes page shifts? How do you get rid of it?
First of all, the cause. All browsers including the popular Mozilla’s Firefox and Microsoft’s Internet Explorer add a vertical scrollbar to webpages that do not fit the screen. A typical monitor screen usually has a resolution of 1028 x 768. Some screens have slightly lower resolution at 800 x 600 and a few at 1280 x 1024. The vertical resolution is the second number. So, a typical screen has a vertical resolution of 600, 768 and 1024 pixels.
No matter how big your screen size a great deal of web pages will exceed the vertical resolution of your screen. That’s a fact. For pages that either too long or too tall, all browsers add a vertical scroll bar to the page for navigation purposes. Users can either use the Page UP or Page Down keys, the Up and Down arrow keys, or the click-wheel which are available on the latest computer mouse for navigation purposes.
Now a few browsers such as Firefox are configured by default to hide the vertical scrollbar for pages that fits a user’s screen. The difference in width when the vertical scrollbar is on and off causes some webpages to shift left to right and vice versa. This especially true for webpages that are styled centrally. The page shifting is the cause of the irritation.
To eliminate the page shift, just add the following code to your CSS stylesheet. This code eliminates page shifting by forcing a vertical scrollbar to show up regardless of the height of the page whether it fits or exceeds the vertical resolution. The effect is you will always have a scrollbar present regardless of page height. It might look odd at first when you have a scrollbar that does not scroll, but people usually do not notice it. Chances are, they don’t even know.
html { min-height: 100%; margin-bottom: 1px; }
For Firefox 3.5 or later, please add:
html { overflow: -moz-scrollbars-vertical !important; }
Sure. I hope the CSS code worked out for you.
Fantastic tip, which I fortunately found after only a day of wondering why pages shifted
I hadn’t even thought about the scroll bar.
One little thing: a copy-paste of your code only worked after I deleted the space inbetween html and {
Thank you so much for this! I had been sitting at my compuer for about 4 hours editing the coding and you have solved it in one go!
Thank you so much for posting this hint. I was beating my head against the wall and finally realized that the shift only happened with longer web pages. Once I typed in a query about this on google, your solution about the scroll bar came up and I tried it out. It worked like a charm.
I’m glad I was able to help you. I wasn’t banging my head against the wall. I was pulling out my hair trying to figure out what’s causing the page shifts!
Dude – Thanks so much for the help! I spent an hour tweaking one page line by line, thinking that I had some error in my code. You saved me from throwing my keyboard against the wall!
Man – Seriously, kudos to this snippet. I thought I was going crazy.
This fix dosent work in IE8 and greater. so its a very time limited fix.
Every page but the index page shifts, please HELP!!!!! I cannot get it to stop, it does it in several browsers.
For those wondering why it’s not working on the newest Firefox 3.5 just add this line underneath the code above and voila:
html { overflow: -moz-scrollbars-vertical !important; }
Jmoss. Super. I just validated it with Firefox 3.5. I’ll update the post. Thanks.
Work perfectly in Firefox !! Does anybody has fix for IE8?
I did a little digging and found this article that seem to fix IE, but I haven’t tried it yet. Needs to be tested.
This doesnt fix the Firefox 3.5 issue. All it does is add TWO scrollbars.
That is the fix.
Thanks man – great tip.
What I want to know is how to make a page like THIS ONE – you know where folks can add comments at the bottom of the page – like I'm doing…… what's the best way….free?
Marc, A blog usually has a comment section after each post. I use WordPress blog software. You can download for free at wordpress.org. You can also sign up for a free blog at WordPress.com.
So I can integrate it into my current website on multiple pages….using my url..?
Not exactly, but you can convert your current website into WordPress and automatically get a commenting feature.
THAAAAANNNNNNKKKKKK YOUUUUUUU!!!!
Man,
Thanks a ton. Just fixed it on my localhost and will be updating the blog with the it soon. This pageshift was bothering me for almost six-seven months now. It was looking really stupid when you move from page to page.
Cheers and thanks again,
Ajith
I’m glad that worked for you. Thanks for stopping by.
If this doesn’t work in your scenario try :
html {height:101%;}
THANK YOU!!!
I’ve been racking my brain about this for a month. Site looks much better now and no shifting!!! I knew it was the scrollbar causing that but couldn’t get it fixed.
Yea I include this code on every page and project that I working on. Great stuff.