4

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?

Himadri
  • 8,600
  • 15
  • 47
  • 70
moonblade
  • 287
  • 1
  • 3
  • 13
  • using javascript to resize columns to page-width is yucky. Without seeing the structure of your page, it's difficult to suggest a nicer way to do it with CSS instead (hence comment and not answer) but you should investigate using CSS. I've always found http://www.cssplay.co.uk/ to be a great resource for things like this. – MalphasWats Nov 05 '09 at 09:24
  • it's a combination of css and javscript. the only reason the javascript is there is so it looks the way i want in ie6, other than that i can do it pretty much all in css. Appreciate the input anyway – moonblade Nov 05 '09 at 09:26
  • overflow:auto; is the default and is why you get the jumping. – Kevin Peno Nov 05 '09 at 17:16
  • Future googlers may be interested in http://stackoverflow.com/questions/3212779/overflow-auto-in-ie7-leaves-room-for-the-scrollbar-when-resizing/11297542 – Andrew Dunkman Jul 02 '12 at 16:25

3 Answers3

2

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.

Kevin Peno
  • 9,107
  • 1
  • 33
  • 56
  • like i mentioned, i have it set to overflow:scroll already. the fact is i don't want the horizontal scrollbar there, nor the vertical unless needed. ie8 was leaving the gap but not showing the scrollbar. it's fine though, i have settled for overflow:scroll for now. +1 for the help :) – moonblade Nov 06 '09 at 11:07
0

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.

Jonathan Abbey
  • 1
0

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%

Hemant Tank
  • 1,724
  • 4
  • 28
  • 56