Log in

View Full Version : Body overflow set to auto causes horizontal scrollbar in IE6


ddadmin
11-27-2006, 05:09 AM
Hi;
I'm trying to figure out a graceful way to overcome a bug in IE6 when it comes to setting the BODY element's CSS overflow property to "auto." A picture speaks a thousand words, so here goes:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test page</title>
</head>
<body>
<h2>In IE6 AND doctype=standards mode, horizontal scrollbar incorrectly appears when setting body overflow to "auto" via scripting.</h2>
<div style="height: 1000px"></div>

<script type="text/javascript">

var standardbody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body //create reference to common "body" across doctypes
standardbody.style.overflow="auto"

</script>

</body>
</html>

Basically in IE6, a horizontal scrollbar appears for the document even though it shouldn't be there. This bug only occurs when an explicit doctype is declared at the top of the page in IE6. I've searched Google on this though apparently have yet to come across a solution. Anyone know a good fix?
mwinter
11-27-2006, 04:53 PM
Basically in IE6, a horizontal scrollbar appears for the document even though it shouldn't be there. This bug only occurs when an explicit doctype is declared at the top of the page in IE6. ... Anyone know a good fix?

Apply the declaration to the body element, regardless of rendering "mode": the root element isn't necessary. Seems to work here in various browsers.

Mike
ddadmin
11-27-2006, 11:08 PM
Thanks Mike. Unfortunately it doesn't quite seem to work. By simply using document.body, it appears to just have no effect on the document either way. Basically what I wanted to do was dynamically hide the document scrollbars via scripting, then re-enable it again using the value "auto". So something like:


standardbody.style.overflow="hidden"
document.body.style.overflow="auto"

which doesn't work.

Or:


document.body.style.overflow="hidden"
document.body.style.overflow="auto"

which doesn't work either. The only combo that does is:


standardbody.style.overflow="hidden"
standardbody.style.overflow="auto"

Except with the horizontal scrollbar issue I mentioned. Lol.
mwinter
11-28-2006, 12:30 AM
The problem seems to be using the value, auto. Using an empty string avoids the horizontal scrollbar in IE6, but fails to restore the vertical scrollbar in Opera for some reason.

A rather dirty approach is to always switch the overflow property of the body element between hidden and auto, and the root element (whatever that is, depending on mode) between hidden and the empty string. However, that causes a rendering issue in Mozilla 1.0 (and perhaps for a few minor revisions after that - I don't have them installed).

It might be better to play with a containing element - a div, for example - rather than the html or body elements. I haven't investigated that yet, and it's a bit late to start. I'll have a look tomorrow, unless you find a solution before then.

Mike
ddadmin
11-28-2006, 01:16 AM
Thanks Mike. In this case I'd definitely need to manipulate the overflow of the entire document, and not just a container DIV within it for example. I'll play around a little bit more tonight, but don't worry too much about it, I'll just bypass IE6 if needed when it comes to this particular operation. IE7 fixes the issue apparently.