TheDesignspace
Preventing Page Shift to left in Safari and Firefox


November 19, 2005
CSS | Web Building

My home page has a lot of columns - the less important ones are usually beyond the right edge of the page in a small screen. In Safari and Firefox that creates an unpleasant page "jump" or shift to the left when the page first loads. Instead of seeing the navbar and main articles, the page shifts so the content on the far right is within the page.

I found a cure for this behavior here: Getting Rid of the Page Shift

Adding this to the style sheet fixed it:


/*this is to keep page from shifting to left on load in safari and firefox*/
html { min-height: 100%; margin-bottom: 1px; }
html { overflow: -moz-scrollbars-vertical !important; }

Posted by ellen at November 19, 2005 10:14 AM | TrackBack

 Comments

FANTASTIC! I was literally about to pull some hair out until i found this. Thank you!

Posted by: webmaster B on April 23, 2008 12:37 PM

Thanks a lot It's works


Posted by: Pete on August 7, 2008 7:02 AM

This is exactly the thing I needed. I wondered why in the world my pages jump around in Firefox. A quick Google search took me right to your fix. I still don't know why, but they don't jump anymore. Thanks!!!!

Posted by: Eve on November 11, 2008 3:03 PM

You could just use this:

html, body { height:100.1%; } which will force a scroll bar.

The proprietary Mozilla css you've quoted is really intended for use in Firefox's internal rendering stylesheet in order to force the behaviour permanently within a copy of the browser. By using it in an external website sheet as you're suggesting, you're basically doing the same thing twice (for FF only) for no reason.

Posted by: aljuk on November 13, 2008 2:26 PM
 Post a comment
Name:


Email Address:


URL:


Comments:


Remember info?



Recommended Reading