Scrollbar in Firefox and Netscape moves contents when it appears

[ericgeneric]

Hi folks,

How ya all doing? Good I hope.

Anyways..

I have a page which is working well. The only minor problem I am experiencing is that when the contents of my pages extends past the bottom of the browser window a scrollbar appears (which is what I want). The problem being that the vertical scrollbar moves the contents of my page over to the left by however many px the scrollbar takes up. IE and Opera already have a scrollbar so it's not such a problem in those two.

Ideally I would like to get rid of the scrollbars in all browsers and somehow conpensate for this using html and css. Is this possible?

If not I would like to make the scrollbar stay where it is at all times. This would stop my pages contents from moving I guess.

Hope someone answers this,

rich

[monkeythumpa]

You can't control whether or not the scrollbar is there with css, but you can add a background layer that is as long as your longest page so that there is always a scroll bar on smaller resolutions. The problem is on short pages there will be blank space below the content. It kind of looks like you are keyword stuffing.

[tedster]

In another thread encyclo offered this solution to forcing a scrollbar [webmasterworld.com]:

CSS:

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

And (X)HTML:

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

Yes, it's a hack - but it's a helpful one.

[Robin_reala]

I've not tried it but presumably something like:

html { overflow-y: scroll; }

would work?

[encyclo]

html { overflow-y: scroll; }

It should in Firefox 1.1, but

overflow-y

(and

overflow-x

) are not supported in the current 1.0 branch.

[Robin_reala]

Ah, OK :) I've only really use trunk builds so trying to work out what's in the branches proves difficult.

[Longhaired Genius]

It's your page so you can obsess over it as much as you like. But I really wouldn't try to micromanage you pages to this extent if I were you. Presumably your pages have a liquid layout so the browsers and your pages are working as they should. If the content you want to be seen can be seen, nobody but you is going to worry about this.

[tedster]

I would modify what you say Longhaired, in one respect. Visitors may not care, but clients most certainly can micro-manage the rendering minutiae, even while they throw major issues to the winds.

[Edouard_H]

Can't seem to find the original thread that provided this, but this works to force a scrollbar in Mozilla and is ignored by IE:

html {height: 100%;}
body {min-height: 101%;}