Results 1 to 5 of 5

Thread: Body overflow set to auto causes horizontal scrollbar in IE6

  1. #1
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default Body overflow set to auto causes horizontal scrollbar in IE6

    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:

    Code:
    <!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?

  2. #2
    Join Date
    Dec 2004
    Location
    UK
    Posts
    2,358
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by ddadmin View Post
    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

  3. #3
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    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:

    Code:
    standardbody.style.overflow="hidden"
    document.body.style.overflow="auto"
    which doesn't work.

    Or:

    Code:
    document.body.style.overflow="hidden"
    document.body.style.overflow="auto"
    which doesn't work either. The only combo that does is:

    Code:
    standardbody.style.overflow="hidden"
    standardbody.style.overflow="auto"
    Except with the horizontal scrollbar issue I mentioned. Lol.

  4. #4
    Join Date
    Dec 2004
    Location
    UK
    Posts
    2,358
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

  5. #5
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    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.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •