Noscope is a bi-weekly journal serving up snacksized portions of pointless stuff since 2001. On a new linode server!
I also do freelance design and usability via dejligt.com

Unnecessary Horizontal Scrollbar in IE Popups or Frames XHTML Bug

    22:46 on February 10, 2004 , ,

Internet Explorer 6.0 for Windows, and Internet Explorer 5.0 for Mac has a bug that provides a horizontal scrollbar to pages residing in frames or popup windows, even when no horizontal scrollbar is needed. The cause is a flawed interpretation of the XHTML 1.0 transitional doctype.

Here are some solutions to the problem.

To fix the problem, you may select the solution that fits you best.

Solution 1:

Paste the following code in your stylesheet:

html {
	overflow-y: scroll;
}

This forces the vertical scroller to be enabled by default, thus, for some reason, eliminating IE’s need for a horisontal one.

Pros:

  • Fixes the problem completely, allowing you to keep your XHTML doctype intact

Cons:

  • Forces the vertical scroller, even when it’s not needed. Be careful not to attach the stylesheet to, for instance, a frameset index.

Solution 2:

Paste the following code in your stylesheet:

html {
	overflow-x: hidden;
	overflow-y: auto;
}

This hides the horisontal scrollbar, and sets the vertical scrollbar to only be enabled when necessary.

Pros:

  • Visually fixes the problem
  • Doesn’t force a vertical scroller when it is not needed

Cons:

  • Simply hides the horisontal scroller, doesn’t actually fix the problem. Thus, you may have content that will actually be located outside the page, where normally a horisontal scroller would be needed. It will be forcefully hidden.

Solution 3:

Paste the following code in your stylesheet:

body {
	margin-right: -15px;
	margin-bottom: -15px;
}

This adds a negative vertical and horisontal margin, the exact amount that IE adds, thus eliminating the artificial need for a scrollbar.

Pros:

  • Visually fixes the problem
  • Doesn’t force a vertical scrollbar

Cons:

  • Doesn’t allow you to utilize the fill horisontal screen real estate, due to the “artificially created” 15px margin

I personally use, and would recommend, solution 1.

Forcing scrollbars

The techniques used to “fix” the bug in question, can also be used for other purposes. With CSS, you can forcefully show or hide both vertical and horisontal scrollbars in both Mozilla Firefox and Internet Explorer.

Forcefully enabling scrollbars:

html {
	overflow: scroll;
}

Forcefully disabling scrollbars:

html {
	overflow: hidden;
}

Hiding the horizontal scrollbar in IE:

html {
	overflow-x: hidden;
}

Hiding the vertical scrollbar in IE:

html {
	overflow-y: hidden;
}

Forcing the horizontal scrollbar in IE:

html {
	overflow-x: scroll;
}

Forcing the vertical scrollbar in IE:

html {
	overflow-y: scroll;<
}

Forcing the horizontal scrollbar in Mozilla:

html {
	overflow:-moz-scrollbars-horizontal;
}

Note: This forces the horisontal scrollbar ONLY. This means even if a vertical scrollbar is necessary, it won’t appear.

Forcing the vertical scrollbar in Mozilla:

html {
	overflow:-moz-scrollbars-vertical;
}

Note: This forces the vertical scrollbar ONLY. This means even if a horisontal scrollbar is necessary, it won’t appear.

References

Thanks to Nikolaas De Geyndt’s excellent document, for providing some of the solutions.

  1. tobcast tweeted this.

Pings

  1. devblog.de » IE Bug: Unn
  2. Chris Worfolk’s Blog » Blog Archive » Fixing Internet Explorer
  3. Evon’s Art Blog » Blog Archive » IE horizontal scrollbar problem
  4. achedy’s weblog » Blog Archive » Mengatasi Horisontal Scrolling Frame pada IE
  5. No Can Do » Blog Archive » How to correctly prevent horizontal scrolling of a web page
  6. Fix Horizontal Scrollbar in Frames or Popups « Power of Thought
  7. LSDN » Blog Archive » IE?????????XHTML?????????BUG
  8. breaker of stuff, destoryer of things, sometimes ninja | how to: css, scrollbars, display,and scrolling
  9. how to: css, scrollbars, display,and scrolling | breaker of stuff, destroyer of things
  10. Fearlessflyer Design » XHTML Horizontal Scroll Bug

Comments

  1. bramick says:

    Robert Accardi said:

    Here is another solution I came up with.

    body

    {

    position: absolute;

    right: 15px;

    margin-left: 15px;

    }

    The vertical scrollbars are being rendered on top of the body. They obscure approximately 15 pixels of the body?s content. So my approach is to move the body in 15pixels from the right edge so that should the v scrolls be needed, they won?t cover anything important up.

    This idea works pretty well, but just keep in mind if not all the pages have the vertical bar then there will be a margin-right applied to these as well.

    Just make sure you are ok with this before you proceed.

  2. Harm says:

    Thanx allot!

    *html {

    overflow-x:

    hidden;

    overflow-y: auto;

    }

    worked for me :)

  3. Gary says:

    Nice little explanation from Adobe:

    http://www.adobe.com/devnet/dreamweaver/articles/horizontal_scroll.html

    –> Remove all depriciated tags. Does that really work though???

  4. leigh says:

    Well that is cool it has helped me on this site i am working on , i dint have a problem IE t was with fire fox, but selecting yes to scroll in frames and then using the stlye…

    html {

    overflow-y: scroll;

    }

    Works but it does not validate can any one explain why?

  5. Tavo says:

    Solution 2b:

    html {

    overflow-y: scroll;

    overflow-x: hidden;

    }

  6. Martin Jespersen says:

    The better solution is to set the width of the body to less than that of the iframes width+margins/paddings/borders/vertical scrollbar

    ie. if you have an iframe that is 800px wide, set the following style for the document it will contain:

    body {

    border:none;

    padding: 0px;

    margin: 0px;

    width: 784px;

    }

    the 16px reduction is the width of the vertical scrollbar.

    if you raise the margin/padding/border reduce the width accordingly.

  7. Solution 1 is indeed the least worst. However, you’re actually better off not writing xhtml at all – simply html 4 strict. It really doesn’t have any practical downsides.

  8. Nitin says:

    Thanks a lot dude. I have spent a lot of time figuring out dead vertical scrollbar problem which is appearing only in mozilla. Then come ur solution for the aid and simply putting overflow-y: auto; did a magic. Thanks a lot.

  9. MadRussian says:

    Another solution for solving the problem is to remove the Doctype definition from the top of your page.

    DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”

    Dreamweaver automatical includes this with all pages created. And this is what causes the problem in IE.

  10. Kirit says:

    Dear All,

    I have a problem with the scrollbars. In some PCs, the vertical scrollbar does not appear even when required. In others, it appears & works fine. The PCs have the same OS (Windows XP) & the same IE 6.0. The application is run on a full-screen mode. It is a JSP file.

    Kirit

  11. Richa says:

    Thanks, its gr8

  12. fatih says:

    Allah razı olsun be kardeşim. :D

    thanks

  13. Rafael Giusti says:

    The only reliable AND also CSS and HTML-comformat manner to fix this issue is removing the DTD URL from the tag.

    Read more about that in here: http://www.adobe.com/devnet/dreamweaver/articles/horizontal_scroll.html

    That way, Microsoft IE doesn’t ruin your pages and W3C continues validating them.

  14. Tina says:

    I am having a problem forcing the scrollbars in IE.

    I tried everything you suggested in both the style sheet and the regular page. I’m new to css and am kicking myself for not just doing this in HTML.

    Now I’ve built the whole site and have no scrollbars!

    Your fixes fixed it in Firefox but IE still wont’ budge. (See the “upcoming events” link for the fixed one). Even in Firefox the scrollbar is cut off some…

    Help!

  15. Josh Stodola says:

    Actually, I got the solution. Except mine is for horizontal scrolling. Could be turned around though.

    http://blog.josh420.com/archives/2007/11/fixing-the-ie-overflow-vertical-scrollbar-bug.aspx

    Best regards…

  16. Anne says:

    I love you and I want your babies!

    No seriously, that’s exactly what I needed and searched for for ages.

    Be blessed with sparkling, precious things!!!

  17. Alex says:

    I very much appreciate you posting this! Simple problems should always have simple solutions, unfortunately, they don’t :).

    Much thanks,

    Alex

  18. storm says:

    Even though this post is so old, it’s still extremely valid. Thanks for posting this many years ago, as you just helped me fix an annoying ‘feature’ of IE6 (I used your overflow-x: hidden; to turn the damn thing off, as that is perfect when working in css divs where you can totally control the width of content boxes).

    Cheers!

  19. iGuide says:

    This one is bizarre beyond all others I’ve encountered. Thanks for your help, even if its a hack, I’m getting the feeling hacks are the only way around this one.

  20. Umakanth says:

    I have a problem with scroll bar in mozilla.The horizontal scroll bar gets enabled but the information is truncated which makes the columns overlap and gives a bad look.

  21. fazil says:

    This is really very very helpful, thanks a ton for posting it.

  22. htnmmo says:

    Ran into similar problems with Blogger Templates.

    Most of the time I can resolve it by just setting the margin and padding in the html element in css. The overflow only as a last resort after I’ve exhausted all other options. Thanks for providing all the options

    The bottom of my latest entry has information on removing horizontal scroll bars from Blogger Templates.

    Thanks for providing all the different variations for controlling scrollbars in css.

  23. htnmmo says:

    By the way.. You do realize this page has a needless horizontal scrollbar because of your search box right? :)

  24. Joen says:

    Heheh, yes, I do realize that. And because this is my personal website, and because the search box is where I want it, I get to do it.

  25. thank you for this. fixes my problem

  26. Prowebdesign says:

    You are the man! :) Thanks a lot!