homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

Vertical Page Shifting
Confused on Why Page is Jumping Upwards

10+ Year Member

Msg#: 4232292 posted 9:28 am on Nov 19, 2010 (gmt 0)


Just tonight a strange problem has developed on a new template I'm using on my sites. Keep in mind before beginning, that I've been using this template for two+ months daily without issues at all.

Despite that, tonight I noticed that all pages that use this template are shifting vertically upward after the page completes loading - completely removing the default browser margin/padding between the top of the web page and the bottom of the browser window.

For this template, I didn't define a top padding or margin for the "body" tag in CSS (I havent' done it on several other templates either - templates which are performing just fine, btw).

Trying to describe this, here is what happens in order:

1. Page Begins to Load
2. The default padding between bottom of the browser window and the top of the web page appears.
3. Page Continues to Load
4. Page finishes loading and at the same time the default padding between the top of the web page and the bottom of the browser window simply collapses - pushing the top of the web page up directly beneath the browser window, causing the page to "suddenly shift vertically".

Anyways, since I've been using this template for 2+ months without any problem in all browsers, I'm totally confused at why all of a sudden (in both IE and Firefox) this problem started to happen tonight on this one template.

I've tried to fix this problem by adding padding to the Body tag. And this is a partial but even a more annoying fix. The page still jumps with this fix. However, the page doesn't jump all the way to the top but retains the padding set in the body tag.

Any advice on what might be wrong? And how to fix it?

Edited : Also, I'm not even 100% positive that this is a CSS problem. In Firefox, I hear the sound of a link being clicked when the page suddenly shifts upward - almost like an invisible link is somehow being triggered. Could this be a strange javascript problem?



5+ Year Member

Msg#: 4232292 posted 9:40 am on Nov 19, 2010 (gmt 0)

That is spooky jimh009 - I can't imagine how it could be CSS if you hadn't made any changes and the rest of it is still sweet.

My guesses would be with JavaScript (particularly because of how it happens when the page has finished loading) - if you have some sort of script referencing an externally hosted file, and that script has been updated for example.

The only other thing I can think would be that your site has been hacked and this is a side effect of that.


10+ Year Member

Msg#: 4232292 posted 9:50 am on Nov 19, 2010 (gmt 0)

Yeah, it "was" a spooky thing. Thankfully, it's past tense now.

The Amazon javascript that is run and is at the bottom of the page that displays book pricing/availability when the user hovers over a book link (and which I've been using for years without problems) was causing the problem. Why, I have no idea. But yanking it out solved the problem. The script was also causing problems with other pages that don't use the new template, too.

Must be something on Amazon's end, apparently. Hopefully they get it fixed soon or this script is gonna be yanked!

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved