Inexplicable left shift

[George M. A. Cumming Jr.]

Hello,

 

I am working on a site using Blueprint. It is very typical. Header, Content (two columns), Footer. There are six top level pages. Five are working perfectly fine. The sixth is a real puzzler. When it loads, the whole page shifts left 8 pixels. That's not much but it is annoying. I reloaded the page nearly empty and no problem. I then added one section at a time looking for the problem. Each step of the way all is well. It happens in the final content section, column two when I add a final fourth paragraph. Then the left shift starts. Eliminate the fourth paragraph and all is well. This happens in both Firefox and Opera. The grid alignment is maintained. It always lines up in showgrid. It's just that the whole page moves left after adding the fourth column. Any ideas?

 

Thanks,

George

 

********************************

George M. A. Cumming Jr.

cumming...@gmail.com


********************************

 

 

 

[Callum Wilson]

Hi George,

On this page that is shifting left, do you happen to see a vertical scrollbar that is not present on the other pages?

cal.

--

Callum Wilson

calw...@gmail.com

Oxygen Kiosk

http://oxygenkiosk.com

oksushi on Freenode

[George M. A. Cumming Jr.]

Hi,

 

Yes, exactly. There's one on the right on just that page.

So, it is a specific vertical length that triggers the effect.

Is there someway (besides adding extra length to the other pages)

to make it happen with the other pages so that it is not so

noticeable?

[Callum Wilson]

Hi George,

What you are seeing is not an issue at all, it is just a narrowing of the viewport width due to the browser adding a vertical scrollbar to allow the user to view the 'longer' content.

The 'shift' occurs because you have told the containing block to appear centred in the viewport, which it is doing.

So, if this really is an issue for you, you can either not centre your website, accept that this is the normal behaviour, or you can add a vertical scrollbar to the viewport at all times (something like body {overflow-y: scroll;}). The third option is a terrible one, as a user would not expect to see a vertical scrollbar unless there was something to scroll to.

HTH

--

Callum Wilson

calw...@gmail.com

Oxygen Kiosk

http://oxygenkiosk.com

oksushi on Freenode

[George M. A. Cumming Jr.]

Thanks Callum,

 

It's always the obvious thing right beneath your nose that's the hardest to see.

 

I appreciate the suggestion for  body {overflow-y: scroll;}.

 

I'll give it a try.

 

Thanks,

 

George

 

********************************

George M. A. Cumming Jr.

cumming...@gmail.com

OrientSee Blog
http://www.georgemacumming.com/

********************************

 

[G. D. Speer]

I agree with Callum, the UI issue of an unscrollable scrollbar is a worse issue than

the jarring 11 pixel shift.  That said, for some (very few) sites I have forced the page to be

height 100% plus a few pixels of padding to force the bar to appear for a short page or

intentionally offcentered by 1/2 the width of the scrollbar by browser sniffing and adjusting

the padding of a div within the centered div - letting it shift left or right to offset the centerline
shift.  This only works if the short pages are predictable or measureable with javascript. 

One other 'hack' I have seen - you can style the color of the scrollbar in some browsers to

effectively force it on and then 'grey it out' by setting all element colors to match/disappear
into your background if it's a consistent color.

 

I have to say most people don't notice/care.  It's the nature of centered sites.

 

---

No virus found in this incoming message.
Checked by AVG - www.avg.com
Version: 8.5.339 / Virus Database: 270.12.89/2197 - Release Date: 06/23/09 05:54:00