Scollbars cause page shift

Opera 7 and Firebird

[StepOne]

I have written a number of fixed width web pages (750px) centered on the screen. Some pages are obviously larger than others ie. some require the browser to place a scroll bar and some do not.

When using IE 6 (PC) all is well, but if I use Opera 7.2 or Firebird 0.7 (and others) and switch from a page with a scroll bar to one without and back again the whole page shifts to the right and back again. It looks ugly, and to repeat the page stays solid when using IE, is there anyway of getting those other browsers to be as equally obliging. This is probably a daft question, but thought it worth asking.

[tedster]

I've noticed this phenomenon myself and never found a fix, except for ensuring that all pages have scrollbars.

I also don't think it's a big issue, so I didn't try very hard to find an answer. In my case at least, it's more likely something only noticed by me during testing -- as I rapidly move through the pages in a fashion that the general visitor is unlikely to use.

[hartlandcat]

If I've understood your question correctly, then the answer as to why this happens is because IE always shows a scrollbar regardless of whether it's needed or not, whereas most other browsers will not. There's not a lot you can do about this.

[dmorison]

I first complained about this in Usenet over 2 years ago; and think it is very poor design on the part of Opera / Netscape / Mozilla; etc.

What is means is that canvas width effectively becomes a function of page height; and the effect is just plain ugly as everything shifts left and right.

There is no practical solution to it.

[asquithea]

For what it's worth, I feel it's very poor design to create a site that doesn't make good use of available page space, but there you go.

I think IE's behaviour is a hold-over from the days when browsers weren't capable of reflowing content as the window size changed. Now that they can, it makes sense to make the best use of page space, and avoid displaying an unsightly scroll-bar when it isn't necessary.

I wouldn't worry about it, in any case. No-one's likely to notice.

[encyclo]

There is no practical solution to it.

Actually, there is a solution which forces a scrollbar, but it is a real hack. In your CSS file, add this:

#scroll { 
position:absolute; 
top:0; 
bottom:-0.1px; 
width:1em; 
z-index:-1; 
}

and somewhere in your HTML, add:

<div id="scroll"></div>

That puts an absolutely-positioned div which is 0.1 pixels longer than the page, meaning that there will always be a scrollbar showing. Not ideal I know, but I've found nothing better.

Hope this helps!

[TGecho]

It really doesn't bother me. In fact if anything IE's handling annoys me. :)

Now, if consistancy is what you're after, you could do something like this:

html {
height : 100%;
overflow : scroll;
}

Since overflow-y isn't part of the current official spec (I think it's in CSS3), you'll be stuck with both a vertical and horizontal scroll bar. But at least it'll be consistant.