Description
Tutorial for fixing the "page shift" problem that happens on loading pages of different lengths or when page's length changes with scripts
Date of the Tutorial
Tue Aug 18 18:56:03 2009
hasLayout.net
Fixing "Page Shift" Problem
Table of Contents
Overview
In this tutorial I won't be covering any "break-through" methods. I will talk about a problem about which a lot of people seem to ask and I finally got sick and tired of explaining what is going on and how to fix it.
What's Going On, Man?
You are working on the site and then you notice that when you click through several pages the site shifts horizontally by several pixels and you wonder wtf is up. The answer is: scrollbar.
The shift happens when you click from page with little content (no vertical scrollbar) and land on a page with lots of content (vertical scrollbar appears). The problem becomes more apparent when you have some nifty-crifty scripts on the page that hide/show large piece of content and, depending on the state, the scrollbar appears and disappears.
Chances are you won't notice that in IE6 and IE7 because by default it got the "fix" already in place.
Here's a demo with a scripted button that hides/shows large chunk of text demonstrating page-shift problem.
Overflow The Solution
The problem happens because in [most] browsers the overflow on <body> element is set to auto, thus the scrollbars are visible only when there's enough content to require them.
What we will do is change the vertical scrollbar to always show with CSS3 overflow-y property. Note: this property exists in CSS3 and therefore will not validate using CSS2.1 validator profile - just ignore the error. Let's have a look:
The fixed demo is shown on a separate page.
- CSS Code:
html { overflow-y: scroll; }
Not much to it; overflow-y set to value scroll on <html> element causes [modern] browsers and IE to always display vertical scrollbar, effectively elimitating the "page shift" problem.
If you are wondering why in the beginning I was talking about overflow on <body> element, yet we are setting it on <html> element, then I would recommend you to read Section 11.1.1 of CSS 2.1 Specification along with my "IE 6 and 7 Document Scrollbars Overflow Inconsistency" write up. Enjoy!
Comments
-
Thu May 2 11:17:29 2013
Thanks Man.. Work like a Charm.. Cheers ;)
-
Thu Apr 4 12:42:25 2013
Sometimes the simplest things are the best! this has saved my sanity :-) big thumbs up!
-
Thu Mar 28 16:09:23 2013
Yep. This did it. Thanks.
-
Wed Mar 27 07:33:02 2013
thanks
-
Mon Mar 18 17:07:52 2013
Becky, consult with the manual/forums for whatever CMS you're using... Try using this in custom CSS:
html { overflow-y: scroll!important; } -
Mon Mar 18 10:39:21 2013
Hi there. Where abouts do I add this code? The CSS Stylesheet warns it shouldnt be altered and that I should use the custom CSS but when I've added codes in custom CSS before they don't work. Thanks in advance
-
Sun Mar 17 15:33:16 2013
YOU RULE !!!!
Many thanks -- I never would have figured this out.. now FIXED!
jameskirkman.com -
Mon Feb 4 07:52:47 2013
Samsung scroll bar suddenly disappearing
on the right side. Have looked at the
control panel, my comptuer and right
click on the mouse. Can't figure this
out. -
Tue Jan 29 11:48:44 2013
Thanks! You fixed my webpage :)
-
Sun Jan 27 11:45:09 2013
ekrem, your code works fine for me. If you still claim it doesn't work, try posting the question in appropriate forum and not off-topic comments. Makes sense no?
-
Sun Jan 27 11:38:20 2013
Never mind. Found it.
-
Sun Jan 27 11:37:25 2013
ekrem, what problem would that be? I don't see any other comment posted under your name.
-
Sun Jan 27 07:17:06 2013
Is there any comment for my problem ?
-
Sun Jan 27 06:17:11 2013
Hi all , I have a question.I have created a basic trial web page, like the following tags:<body>
<form id="form1" runat="server">
<div id="dContainer">
<div id="dHeader">Dr Sadık</div>
<div id="dMiddle">
<div id="dMiddleLeft" class="cGeneral">deneme</div>
<div id="dMiddleRight" class="cGeneral">deneme</div>
</div>
<div id="dFooter">
<div id="dMiddleButton" class="cButtonGeneral">
<asp:Button ID="Button_Enter" runat="server" Text="" CssClass="cButton" />
<!--<asp:ImageButton ID="ImageButton1" ImageUrl="~/SiteImages/dr.png" runat="server" />-->
</div>
</div>
</div>
</form>
</body>
and css's are:
body,form#form1,html
{
margin:0 0 0 0;
padding:0 0 0 0;
width:100%;
height:100%;
}
.cClear
{
clear:both;
height:0;
}
#dContainer
{
width:80%;/*When it is px no problem*/
height:80%;
position:absolute;
margin:10% 0 0 10%;
/*top:20%;
left:30%;*/
}
#dHeader
{
width:100%;
height:10%;
float:left;
display:block;
}
#dMiddle
{
width:100%;
height:60%;
float:left;
display:block;
}
#dFooter
{
width:100%;
height:20%;
float:left;
display:block;
}
.cGeneral
{
width:50%;
height:80%;
float:left;
display:block;
}
.cButtonGeneral
{
width:40%;
height:100%;
float:left;
display:block;
}
.cButton
{
width:50%;
height:100%;
margin:0 0 0 50%;
background:url('../SiteImages/dr.png') no-repeat 0 0;
}
and when I open the inspect element part of firefox all elements are being collapsed because I am using percentage value for dContainer.If I use px value only for dContainer all problem is fixed.But for resolution change I don't want to use px.
Any help please,
Best wishes.. -
Wed Jan 23 09:55:25 2013
Thank you! It was an instant fix. :-)
-
Thu Dec 13 07:42:59 2012
thank you thank you!!
-
Thu Dec 6 21:23:10 2012
It's work for me, thanks!
-
Tue Dec 4 02:37:56 2012
I want to say thanks, after two hours of banging head, google brought me here, and this page solved my problem.
-
Thu Nov 1 06:36:42 2012
Just wanted to say thanks. I spent over an hour to find a solution for this issue and then I saw your article :-)
-
Sun Sep 23 13:55:50 2012
all I want to know is , how do I fix it so the scroll bar stays on bottom of page , all pages ?
just tell me where to go to click this or that to fix it , thanks -
Wed Sep 12 22:28:10 2012
Awesome awesome awesome!!
-
Tue Sep 11 22:29:22 2012
Sorry,
I have no idea what you are talking about either. My problem is white-strike-though lines in my scroll bar text. What a P.I.T.A.
E-mail me any ideas to resolve this.
Mike -
Sun Sep 9 19:33:27 2012
I have no idea what you're talking about, talha, what's up with margin-left? Even if it were necessary, scrollbar widths are configurable by the user, so 5px you mention are useless.
-
Sun Sep 9 15:26:31 2012
Center the go again, me come to you :)
html {
    overflow-y: scroll;
    margin-left: 5px;
} -
Sun Sep 9 15:24:07 2012
GREAT !! THANKS.
-
Fri Aug 31 03:16:00 2012
Thanks
-
Thu Aug 23 10:02:49 2012
Thanks! Couldn't figure out why 2 pages were shifting, now it all makes sense! Great tutorial!
-
Tue Aug 21 11:08:06 2012
thank you!
-
Tue Aug 14 08:35:36 2012
Thank you so much!
-
Thu Aug 9 06:39:28 2012
Ah, my teacher didn't even know what was going on here. Thank you so much xD
-
Fri Jul 13 09:07:34 2012
Thanks champ, works well!
-
Fri Jun 22 19:47:21 2012
I can't thank you enough - this problem was driving me mad as it only happened on one page in my entire site! A very easy fix and really clear explanation, though watch out - this happened with IE9 (no problem with FireFox). I have bookmarked your page for next time I go mad over my site!! :-)
-
Fri Jun 22 11:30:33 2012
Thank you! I spent hours combing through my code before finding your post. Very clear explanation. I will bookmark your site for sure!
-
Fri Jun 15 18:47:56 2012
Awesome!! Thank you, quick and easy fix! I've been trying to figure this out for weeks!
-
Tue Jun 5 04:14:14 2012
Thank you!!!
YOU ROCK!!! -
Sat May 5 16:48:11 2012
Thanks you very much so simple but i been looking for it a while now. Thought it was the generated themes fault, chears
-
Tue Apr 3 12:35:26 2012
You are my hero. I have been trying to figure out the page shift for so long, and it's such an easy fix. Thank you, thank you, thank you.
-
Thu Mar 22 01:56:18 2012
Brilliant! an easy fix :)
-
Tue Mar 20 18:09:08 2012
Thank you very much :D
-
Fri Mar 16 03:45:43 2012
Great help to a very annoying problem. Thanks!
-
Tue Mar 13 08:47:41 2012
Thank you!
-
Mon Mar 12 04:32:44 2012
Brilliant!
Many Thanks for this - saved what little hair I have got left lol -
Sat Mar 10 10:29:04 2012
your a god, I totally thought it was a problem with my code.
-
Fri Feb 24 19:57:46 2012
Wow, life saver. I would never have thought that would be the problem. This has been bugging me for hours while I'm trying to design a new website!
-
Sun Jan 22 15:57:39 2012
Been trying to figure it out for hours! Thanks!
-
Wed Jan 18 18:18:10 2012
Thanks!
-
Wed Jan 18 05:01:14 2012
Thanks.
Best regards.
Sang. -
Wed Jan 4 10:01:42 2012
great..thanks to save my time....finding this solution from long time.
-
Thu Dec 15 16:38:36 2011
Your are a frickin' genius sir! Thank you so much :)
-
Tue Dec 6 23:19:28 2011
Works awesome. Been wondering what this shifting prob was for months. Thanks
-
Wed Nov 2 12:59:46 2011
Thanks man!
But the problem isn't show in Safari, only in all the other browsers -
Fri Oct 28 16:36:24 2011
Thank you! You saved me hours and hours of work trying to figure this out.
-
Tue Oct 11 11:03:39 2011
Thanking you in advance... sick of searching and found your article. Please add more tag or keyword to your post so it become easier to find.
-
Tue Sep 6 12:12:17 2011
I've been wondering over this problem for ages. Don't know how to thank you.
-
Sun Aug 7 15:08:56 2011
Well, by golly, I went through a few pages with a few solutions to this problem, and this one worked. Thank you. -AP
-
Sat Jul 30 07:46:41 2011
Thanks a lot!
-
Sun Jun 26 19:52:09 2011
YOU ROCK!!!!!! I OWE YOU ONE!!!!
-
Tue Jun 21 16:57:29 2011
Solved my issue in an instant!! Thank you very much
-
Mon May 9 23:13:53 2011
SO PERFECT! Exactly what I was looking for! Thanks :)
-
Mon May 9 03:25:24 2011
you helped me a lot! THANKS!
-
Thu May 5 07:39:45 2011
That did the job. Thanks!
-
Thu Apr 21 15:03:52 2011
Thanks so much..... Works Great!
-
Sat Apr 2 13:27:56 2011
The line - overflow: -moz-scrollbars-vertical !important;
makes the horizontal scroll bar dissapear. Surely that's not right? -
Sun Mar 20 23:44:34 2011
Lifesaver :)
worked perfectly! -
Fri Mar 4 07:14:10 2011
On the first page of what website? This page offers a solution - it's just one line of code.
-
Thu Mar 3 20:24:13 2011
I am new at this. On the first page of the website, it says "{ height: 100%; margin-bottom: 1px; } " in the upper left corner. How do i make it go away? I copied gnidesign's solution.
"/* eliminate page shift */
html {
min-height: 100%;
margin-bottom: 1px;
/* For Firefox 3.5 or later */
overflow: -moz-scrollbars-vertical !important;
overflow-y: scroll;
} "
Thanks -
Thu Jan 13 17:21:12 2011
ASE, well, only theoretically, and it would involve JavaScript.
A quick Google search shows me that it's somewhat possible to obtain user's scrollbar width with JS. So, what you would do is get user's scrollbar width, figure out whether or not scrollbar is visible, and if not, shift your entire site to the left (or right) for scrollbar_width pixels.
That's too much work for so little gain that I am not even compelled to try :) If anyone dares, feel free to drop the code into comments or to me directly and I'll post it :). -
Thu Jan 13 09:58:07 2011
Thanks for providing a fix to this!
I wonder, though, is there a way to fix this problem without permanently setting the scrollbar to appear? I find a useless scrollbar on pages with shorter content to be... well, useless, and not very visually appealing.
Is there a way to, for example, permanently shift the content to the left as though there were a scrollbar, even if there is not enough content to warrant one? That would fix the shift problem because the content would always have the same horizontal position, but the scrollbar would appear/disappear as needed. Is this even possible? -
Wed Aug 11 01:54:03 2010
Awesome! The shift was so irritating!
-
Tue Jul 13 12:56:57 2010
Best... tip... ever!
Thanks man! -
Thu Jul 8 13:22:24 2010
WORKS ON IE8!!!!
BEST SO FAR -
Tue Jul 6 22:11:54 2010
Thank you so much! I thought there was something wrong with my CSS until I did a google search and discovered this is a common issue with pages that have shorter content.
-
Thu Apr 15 22:14:26 2010
Here is the full code that is working in Firefox 3.0 to 3.6.3 and in IE6 - IE8 thanks for your help!
filename: styles.css
/* eliminate page shift */
html {
min-height: 100%;
margin-bottom: 1px;
/* For Firefox 3.5 or later */
overflow: -moz-scrollbars-vertical !important;
overflow-y: scroll;
}
filename: styles-ie.css
/* eliminate page shift */
html {
min-height: 100%;
margin-bottom: 1px;
overflow-y: scroll;
}
Cheers!
Bill -
Sun Mar 21 15:09:15 2010
Thanks a lot! I fixes problem for all browsers.
-
Wed Mar 17 22:39:12 2010
Cool, Thanks for the tips
-
Sat Dec 26 05:47:00 2009
Thank you very much for this !
-
Fri Nov 27 13:43:36 2009
Thank you sooooo much....Great suff!!!
-
Fri Oct 16 15:29:29 2009
Wow! Thank you so much for this. It was driving me crazy.
Everything worked great in Chrome and Safari, but would act up in Firefox 3 and IE8.
This did the trick!
eBook
eBook
eBook