IE8 Leaving space for Unneeded scrollbars

Question

My page is a 3 column design with a header. It renders nicely in IE6 and IE7 (as far as i know). I use javascript to size certain elements of the page, to fit the browser window. On IE8 however, it tries to leave spaces for scrollbars, even when they are not rendered, resulting in a jumping effect when you resize (Page alternates between leaving the gap, and then not.)

If i set overflow:scroll in my css it resolves the issue, however i do not want the scrollbars to show when not needed, so this is only a temporary fix.

Is there any way i can get my page to stretch to maximum width and height (with javascript) and only get scrollbars when needed?

Answer 1

I think you have your thinking reversed now that I've thought about it more.

IE7 and below always showed the scrollbar (disabling it if its not needed). So, when scrolling is needed, the UI doesn't need to be altered to enable/disable scroll.

Since IE8 this is no longer true. When scrolling is needed, the page jumps to accomidate the new needed space for the scrollbar. The same is true for any browser that doesn't show the scrollbar by default.

If you set overflow:scroll on the body you will make all browsers show the scrollbar by default and it should prevent the jumping.

Answer 2

You can always add overflow-x: hidden to inhibit the horizontal scrollbar. When paired with overflow: scroll, it will do what you want with the horizontal scrollbar.

The vertical scroll bar will remain visible, but it will be disabled.

Answer 3

Width=100% not working in IE8 .. especially for tables

http://www.velocityreviews.com/forums/t691164-table-100-and-horizontal-scrollbar-why.html

Instead try to use width=99% or 98%