IE inconsistent scrollbar behaviour

Hi there,

Internet Explorer (6 and 7) confounds me with inconsistent scrollbar
behaviour.

I use three DIVs for creating a three row layout. The second DIV has
overflow set to auto. Failing to get a fluid layout only applying CSS, I
use Javascript to adapt the second DIV's height so that all three DIVs
fit in the browser window. Usually scrollbars appear on the second DIV.
However, if the user increases the browser window width (until content
fits) the x-scrollbar is unnecessary and thus should disappear. Instead,
depending on the browser window width at the time the document was
loaded the x-scrollbar stays.

I think it's best explained using an example. So please see this
stripped down version of the original page where I first encountered the
problem:

http://14mb.de/u/dkabs/testcase_ie_resize.html

The page contains three divs: header, content (yellow background), and
footer DIV (and an advert, but I did not place it). The Javascript code
has been replaced by a form button that sets height of content DIV to
200px. The form buttons also simulates a fixed width content in order to
force a horizontal scrollbar to appear if the browser window is made
small enough.

Try this:
- load page in a small browser window
- press button on page -> x- and y-scrollbars on content DIV appear
- increase browser window width[*]-> x-scrollbar stays (unexpected)
- reload page (this time the browser window is wide)
- press button on page -> y-scrollbar, but no x-scrollbar
- shrink page width -> x-scrollbar appears (as expected)
- expand page width -> x-scrollbar disappears (as expected)
[*]Strangely enough, if the browser window is maximized using "Maximize"
window button, the x-scrollbar duly disappears.

How can I work around this problem? I want to get rid of the x-scrollbar
if it is not necessary and still keep the layout fluid. How can I do this?

Cheers
Daniel

In article <fpppon$i0v$1 (AT) news (DOT) dtag.de>,
Daniel Kabs <daniel.kabs (AT) gmx (DOT) de> wrote:

Hi there,

Internet Explorer (6 and 7) confounds me with inconsistent scrollbar
behaviour.

I use three DIVs for creating a three row layout. The second DIV has
overflow set to auto. Failing to get a fluid layout only applying CSS, I
use Javascript to adapt the second DIV's height so that all three DIVs
fit in the browser window. Usually scrollbars appear on the second DIV.
However, if the user increases the browser window width (until content
fits) the x-scrollbar is unnecessary and thus should disappear. Instead,
depending on the browser window width at the time the document was
loaded the x-scrollbar stays.

I think it's best explained using an example. So please see this
stripped down version of the original page where I first encountered the
problem:

http://14mb.de/u/dkabs/testcase_ie_resize.html

Mercifully, I don't have IE on my computer. I was however curious
about a few things:

(a) Why use a transitional document type - wouldn't you be better off
using strict? (See the Margin: auto thread)

(b) Does this really do what you claim it does?

<!--[if lte IE 6]><style>
#Content {
width:100%; /* prevents wide content from stretching div horizontally
}
</style><![endif]-->

I also notice that you are not explicitly setting margin, padding, and
border on the body, so you will get whatever IE's default is in that
browser

David Stone wrote:

http://14mb.de/u/dkabs/testcase_ie_resize.html

(a) Why use a transitional document type - wouldn't you be better off
using strict? (See the Margin: auto thread)

I used this document type to trigger "standards compliant" rendering
mode while at the same time allow for "relaxed" HTML.

(b) Does this really do what you claim it does?

!--[if lte IE 6]><style
#Content {
width:100%; /* prevents wide content from stretching div horizontally
}
/style><![endif]--

Thanks for pointing out! Even though I forgot to end the comment using
*/ it does what it claims to do. If you omit the above declaration, IE6
stretches the #Content div to make the button fit (instead of showing
scrollbars on the div).

I also notice that you are not explicitly setting margin, padding, and
border on the body, so you will get whatever IE's default is in that
browser

I stripped the page of any CSS which is not related to the problem.

Cheers
Daniel