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; }
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 PMThanks a lot It's works
Posted by: Pete on August 7, 2008 7:02 AMThis 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 PMYou 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 PMSaved a lot of time searching for this answer, thank you!!!
Posted by: spL on March 22, 2009 3:49 PMThanks for the help. I had this same problem, did a search on Google and this helpful hint showed up and worked.
Posted by: Rick on April 30, 2009 11:40 AMThanks loads.
Posted by: Paul on June 1, 2009 5:44 PMThanks!
Posted by: Joey on June 7, 2009 3:13 PMThanks for this, it was driving me crazy, it works in firefox and IE7 ..IE8 however wont do it. but im not gonna worry about that... thanks again
Posted by: 3drian on October 14, 2009 5:01 PMSweet!!! Thank you so much!!!!
Posted by: Stephanie on November 22, 2009 3:06 PMwow! it actually worked!!! Thank you !!! :)
Posted by: Jane on December 1, 2009 1:03 PMTop stuff. Was wracking my brains and going over and over through my CSS thinking I done something wrong in the code! This solved the issue! Glad I googled it - has saved a lot of time and frustration!
Posted by: Jon on December 26, 2009 10:34 AMI love you.....owen
Posted by: owen kelly on January 15, 2010 6:15 PMOk I got that but now where in the word do I insert this?
Posted by: Sandy on January 19, 2010 8:54 PMWorked like a charm. Thanks so much for posting.
Posted by: Lorien on January 21, 2010 12:56 AMThanks so much, it actually fixed in for me in Opera!!
Posted by: Nadja Web Design on January 21, 2010 11:23 AMSo where do I place this code?
Posted by: David on February 11, 2010 5:55 PMIn the CSS style sheet.
Posted by: Ellen on February 11, 2010 6:22 PMThanks for the post! The solution worked like charm!
Posted by: Joe H on February 12, 2010 3:26 PMWorks fine except in IE8. Any solutions or IE8?
Thanks for the good info!
Posted by: Ron M on June 5, 2010 6:58 PMBut this does not fix the page shift from occurring in Safari (4.0.5) only in Firefox.
Posted by: lina on June 17, 2010 5:13 PMIs there a fix for Safari as well?