Pages Jump When Navigating

[BigWave]

Thanks for posting this, Monica. I've got the problem, too, on several new sites I've designed. I've been researching this for a while now, and have tried making the pages the same length, making the copy the same length, forcing scrollbars into the pages via CSS tricks, blah, blah. I honestly never noticed it before. Here's a site under development where the problem is quite pronounced. I just rebuilt the entire site from scracth, each page was duplicated from the index one at a time, just to make sure there were no sizing issues from page to page. In that test, no jump when I added "Services" and "Gallery"; once I'd added "Quote" and "About Us", the jiggling started to appear when navigating back towards "Home". (Hope that makes sense). Again, this site is under development, so it's raw right now:

http://extremelogorugs.com/new/index.htm

Dave

[Soquili]

Monica what page width are you using for the pages that jitter?

[Rik]

Hi Bill.

The page width, on all pages, is 1100px.
It's only the length that is different.

[Soquili]

Thanks Rik. I asked about the width because the length has nothing to do with how a browser will horizontally render a page.

If a persons browser window is wider than a page it must recalculate to center the page on the window, this can cause the jiggle.

If a persons browser window is narrower than the page it must also recalculate and add a bottom scrollbar, again some jiggle.

[Rik]

Hi Bill.

What I found was that not all pages, on Monica's site, jiggle, on the first visit.
Surely, that's weird?

But, what width would be a good recommendation, then?

Also, I will give more information on what I've found with my other Laptop.
Apologies. A bit busy with work at the moment.
So, please have a bit of patience.

[Soquili]

If you can believe statistics published on the web, there are many people still using 1024 x 768 resolution. If you want to subscribe to the theory that all those people use the browser in full screen mode then the 955 pixel (XGA) template would be a good choice.

I would recommend gathering your own statistics about the visitors to your site and decide what width page would work for the majority of the visitors.

[Rik]

Hi Bill.

Re: Monica's metroholistic.com web site

Both of my Laptops are set to 1280x800 resolution.

First Laptop:
Has Windows XP Pro.
Using IE8, I get no jumping. But, there is scrollbar along the bottom.
Using FireFox, I get jumping but no scrollbar at the bottom. So, the centre of the page is being calculated as you suggest.

Second Laptop:
Is a MacBook Pro with Windows 7 running in a VM.
Using IE8, I got no jumping as far as I could see and no scrollbar either.
Using FireFox, I got some jumping on some pages and no scrollbar.

On the Mac side.
Using FireFox I get jumping and no scrollbar.
Using Safari, I get no jumping but the scrollbar at the bottom appears momentarily, which probably shows that some calculations are being done.

So, all in all, your indications that the pages may be too wide sounds pretty good to me.
Particularly when on my XP Pro laptop, I get a scrollbar to show that the page is too wide in that set-up.

The one question I have is, why is there a scrollbar (on my XP Pro with IE8) when there is clear space either side of the page?

[Alan]

I have had this issue as well, maybe look into the tileing background I believe it is a centering issue

[gracehjs]

Well I looked at Monica's web site in IE9 on my big screen, no jumping at all.

[Soquili]

Rik IE8 is known to have problems with horizontal scrollbar, either appearing when it should not or not appearing when it should. Without Monica's source file it would be difficult to say what is causing the problem.