Welcome to WebmasterWorld Guest from

Forum Moderators: open

Message Too Old, No Replies

Scollbars cause page shift

Opera 7 and Firebird

1:06 pm on Jan 22, 2004 (gmt 0)

New User

10+ Year Member

joined:June 26, 2002
votes: 0

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.

5:52 pm on Jan 22, 2004 (gmt 0)

Senior Member

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:May 26, 2000
votes: 0

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.

6:12 pm on Jan 22, 2004 (gmt 0)

Full Member

10+ Year Member

joined:May 1, 2003
votes: 0

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.
8:03 pm on Jan 22, 2004 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Apr 3, 2003
votes: 0

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.

8:25 pm on Jan 22, 2004 (gmt 0)

Full Member

10+ Year Member

joined:Nov 18, 2003
votes: 0

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.

9:19 pm on Jan 22, 2004 (gmt 0)

Senior Member from CA 

WebmasterWorld Senior Member encyclo is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Aug 31, 2003
votes: 6

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 { 

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!

2:17 am on Jan 23, 2004 (gmt 0)

Preferred Member

10+ Year Member

joined:May 24, 2003
votes: 0

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.