Unnecessary Horizontal Scrollbar in IE Popups or Frames XHTML Bug

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.


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


  • 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.


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


  • 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.


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


  • 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 {

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 {

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


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

87 thoughts on “Unnecessary Horizontal Scrollbar in IE Popups or Frames XHTML Bug”

  1. Jon Koerber says:

    Whew! I have been trying to figure this problem out for months. I finally isolted the problem this morning to using frames in IE (that was a minor breakthrough), but still had no idea how to actually solve the problem, until I found this Web site and article. Many many thanks for the excellent research and tips here to work around this stupid problem in IE. I am recommending my customers don’t use IE anymore because of it. Thanks you sooooo much!

  2. Kristen says:

    Thank you so very muchly! I’ve spent all morning trying to figure out what the deal is with the vertical srollbar in one of my frames…I was just about to give up…thank you for your work in putting this answer out there…you’ve made my day -:)

  3. Wizard says:

    Thanx so much, I’m using Netscape but from the moment i changed some of my documents to transitional type I had problems in IE only, although Netscape showed everything OK. I suspected this is a bug in IE, but no other site provided so simple and good solution as yours! You are the man! ๐Ÿ™‚

  4. Vlandar says:

    My village was in ruin because of this horrid xhtml problem. Our websites would constantly falter, and despair was as rampant as the unruly frames which plagued us.

    You have come with your glory, just as the seventh oracle of Zornbar hath predicted. Our xhtml problems are forever solved.

    We have erected a statue in our village square of you, oh great Dane. Even the pigeons revere you, and they dare not befoul this token of our eternal appreciation.

    Prosperity and usability onwards!

  5. Ben says:

    Joen, I can’t get these fixes to work in my context. I am trying to incorporate my blog page into my web site, using nested frames so that one can see navigation banners to other areas of the web site while viewing the blog. I created my web site in FrontPage using HTML. The blog page is hosted by typepad and apparently runs in xhtml. I created a frameset in a page of my web site in order to display my blog as part of the web site. But sure enough, a horizontal scroll bar appears for the frame that contains the blog, even though the table width of the blog is easily small enough to fit in the width of the frame. Before visitin your site, I figured out on my own that the nature of the bug is that the proper appearance of a vertical scroll bar prompts the improper appearance of a horizontal scroll bar, as if the v-bar is hiding something when it actually is not. The v-bar is essential in my application because the blog will always be longer than the frame that contains it, but this prompts the ugly and confusing appearance of the h-bar. I added each of your fixes in the css style sheet to which all of the nested frame pages link, and I also added them to the stylesheet of the blog pages (which I am able to edit online with typepad). It seemed that the h-bar went away at one point, but then when I refreshed the screen it came back. Any thoughts? It will be my honor to erect a statute to you in my village square if you can solve this. Thanks.

  6. Joen says:

    Hehe, more statues ๐Ÿ™‚

    First of all, you should get Firefox and view your site in that browser. You should do this, because if it looks perfect in Firefox, then it is indeed an IE bug. I mention this because it is entirely possible that there is some other reason than the IE bug (part of the design) that makes the h-scrollbar appear. So to eliminate that option and make sure it’s indeed an IE only problem try that first.

    Secondly, could you post a link to the page in question? If you don’t want it to be public you can email me. I could take a look at the page, see what might be the trouble, because I’m fairly certain atleast some of these options should work.

  7. Ben says:

    Joen, I fixed it!!! I’m still going to build your statue in the town square, because your fixes led me to other discussions and, ultimately, to a surprising solution—a solution which should not be a solution at all, and is therefore proof of the existence of the bug in IE. Here it is, for the benefit of your other guests:

    If you are authoring in FrontPage, and you find that the creation of nested frames causes scrollbars to appear on frame windows even when the content is fully displayed, go back to the dialog box for the creation of the frame on which the scroll bar appears and select “always” in the drop-down box on whether to display scollbars. Yes, you read that correctly: in order to suppress the scrollbar that should not appear, you select the option to make it always appear! I suppose there is some zen lesson in this, or maybe just the humor of noting that IE and FrontPage are products of the same evil empire. In any event, it works.

  8. Joen says:

    Glad you fixed it! And thanks for posting the solution here, I’m sure it’ll help.

    When on the topic of web authoring solutions, might I suggest Macromedia Dreamweaver over Frontpage? Dreamweaver is, hands down, the best ever web app out there.

  9. Roy says:

    Thank you very much for the CLEAR explanation and precise directions to fix the horizontal scrollbar problem. The otherwise fine article by Nikolaas de Geyndt did not give clear directions on what to do, but when I found your site you told me exactly what to do. After searching for hours for a solution, your lucid comments helped me solve this annoying problem in a minute! Your efforts are greatly appreciated.

  10. B. Young says:

    Just to tack on another “thanks”. Luckily I found this blog entry only an hour or so after discovering my problem. It is really sad how poor IE is and that it is the standard that all web sites have to be built around. If Firefox does anything I could hope that it will at least encorage Microsoft to fix their browser. The bugs in IE probably cost more money worldwide than any bug in any software application ever! I mean think about it, just the hourly wages of the people on this page add up to a lot of money when you consider how long we spent trying to fix the problem.

  11. Asuki says:

    Hi, I was wondering is there a way to forcefully disable the vertical scrollbar in Firefox? I’ve been browsing around for solutions and yours is the only one that comes close so far. Thanks. =)

  12. Jeffers says:

    matey, so glad you provided this lucid solution. Me nuts I scratch no more, and boy are they sore. Cheers. Statue erection commenced.

  13. Frank says:

    Your fix for forcing a vertical scrollbar in Mozilla:

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

    works, but it doesn’t validate in W3C’s [http://jigsaw.w3.org/css-validator/]

    If you run a CSS sheet through it, it returns this error:

    Line: # Context : html

    Invalid number : overflowParse Error: -moz-scrollbars-vertical

    Just wondering then where to strike a balance between appearance and valid CSS?

  14. Joen says:


    Sorry about your comment not appearing right away—for some reason my spam filter is acting up lately.

    As for the CSS not validating—there is another option. Jon Hicks found a method:

    html { height: 100%; margin-bottom: 1px; }

    It’ll add a 1px bottom border, but it’ll force scrollbars always.

  15. Frank says:

    Thanx Joen,

    Didn’t mean to sound like I was condemning the mozilla fix, as it’s a good fix that works. I tried your second recommendation and it works well too. I’ll think I’ll use that. I also substituted 1px with .01em. It really cuts the “scrolling” down further. Not sure if I will have problems with that in the future, but if so, I can always go back and change it. By the way, nice informative blog, and the encapuslated info on all the various approaches to fixing slight deviances between browsers. Bookmarked for me ๐Ÿ™‚

  16. Joen says:

    I also substituted 1px with .01em.

    Wow, good call! That works perfectly!

    Thanks for your comments.

  17. Elena says:

    Well, the solution scroll=”yes”+html { width: 100%; margin-right: 1px; } removes brillantly the horizontal scrollbar .

    Though I have, on IE, the vertial scroll every time I open the frame. Is it possible to use a solution to see only the vertical scroll when needed?

    Sorry if I’m asking too much, guys!


  18. Joen says:


    If you’re using this code to fix trouble with the horisontal scrollbar, I’m afraid there’s no good solution to showing the vertical scrollbar only when it is needed…


  19. Karl says:

    This is indeed an IE bug. Works great in FireFox and Opera whilst IE want to show the scrollbars. Let’s just hope that IE7 fixes this problem (whenever it arrives). Nice solutions you have here though.

    / Karl-Johan Sj?gren

  20. eliZZZa says:

    One more solution without cons (as far as I can see):

    Just delete the second line of your doctype definition. Instead of

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

    Just shorten it to:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">

    This also works if your styled scrollbars don?t appear in IE 6.0

    Kind regards from Austria


  21. Neil says:

    Nice, thank you for that fix,

    I applied it to a div tag and works on IE on a PC,

    but in Firefox and IE on my Mac the V and H bars are both hidden and content is shown, extending out below my div container.

    I’m still working on this, so I may update my comment soon.

    IE sucks, but IE on a Mac sucks more.

  22. kathleen says:

    For those of you having difficulty with scrollbars in firefox I have learned that overflow-x: and overflow-y: dont work. If you use just overflow:auto most of your problems will be solved! It took me 2 days to figure this out, but I finally got there!

  23. William J. Edney says:

    Kathleen –

    That’s true for Firefox 1.0, but overflow-x and overflow-y will work for FF 1.5 (they’re not gonna do a 1.1 release after all). This is equivalent to Mozilla 1.8, due in Sept / Oct 2005.

    These have been proposed for CSS3 and are quite useful, so the Mozilla guys decided to implement them.


    – Bill

  24. Jonas says:

    Thanks a bunch! Freaking IE, why can’t just everyone switch to FF and let go of the stupid IE, its without doubt the most disturbing application since, ever.

    Anyhow. Thanks for some neet solutions.

  25. AlexOD says:

    Or you could use the XHTML 1.1 spec which somehow side-steps this issue:

    Seems to sort out the scroll bug on IE without any other implications…

    … I think!


  26. Jiman says:

    I have to say, by far the best comments and suggestion to fix this problem.

    However, by fixing this issues, another has risen for me…

    I had seen the solution posted about editing the and scrolling”YES” and that is what I emplemented.

    I have TOP_frame, for a banner inside a table centered in the frame, and MAIN_frame for content, also in a table and centered in it’s frame. The banner fit nicely and I didn’t get any bars, H or V. But like everyone said, I kept getting V and H bars for the MAIN_frame when I didn’t need the H bars. By editing the DOCTYPE, it removed the the H bars and gave only V bars.

    Perfect? No. Because I get not bars in TOP and no H bar and only V bar in MAIN, my “center” has changed and the 2 tables located in different frames no longer line up because the MAIN frame has a V bar taking up space.

    Does the description say what I mean? I hope so and hope you guys and girls can help.



  27. Jiman says:

    Wow, it removed //DOC TYPE// cause I typed it as html code

    The following line is rewritten for clarification:

    ” ” ” I had seen the solution posted about editing the DOC TYPE and scrolling?YES? and that is what I emplemented…

    Thanks and sorry ๐Ÿ™‚


  28. michael says:

    hi there – i too am suffering from this problem but am not accomplished enough to understand this solution! i don’t think i have a stylesheet to edit!

    it’s a frames problem where in one side i set it to AUTO and i still get the horizontal scroll even though i dont want it. i never used a stylesheet or figured out how that works!

    please help!

    michael x

  29. Joen says:

    Try to insert this in your HTML document instead of your stylesheet then, michael:

    < style> html { overflow-y: scroll; } </ style>

    Place it right after your </title> tag.

    Good luck.

    Edit: Code borked. Remove the space right after the < in the opening and closing style tags.

  30. michael says:

    html {overflow-y: scroll;}

    i added the script above to the blog index.php page (in the head tag) and it worked perfectly! you are an absolute star! thanks so much for this tag i love it!

  31. michael says:

    html {overflow-y: scroll;}

    ok it was this i added with the spaces!

    thanks once more – i’ll stop ruining your blog page now!

    michael x

  32. Gumbo says:

    Thanks. Great tips.

  33. Alissa says:


    Thank you so much for those tips! A little off topic, but I love the design of your site. Very simple and sleek! I’m only a petty beginner and found your pg through google – but I think I know a good page when I see one. Thanks again. BTW, when my site is up, I will appreciate any tips. =)


  34. Frank says:


    Thank you very much for the tips.

    I was breaking head over this problem.

    The “html { overflow-y: scroll;}” worked just great.

    These tips are the ones I was looking for. It took me 2 weeks to figure it out.

    Many thanks again!


  35. I found a solution that fixes the issue “IE displays unnecessary horizontal scroll bar in frameset”, and completely restore the normal behavior of the IE browser with frames and valid XHTML 1.0 documents.

    Read the solution at:


    Darius Livescu


  36. Thanks Buddy,

    I was scratching my head to fix this IEs horizontal scroll of DIV tag on my own. Your notes are wonderful. THanks a million ++.


  37. GaLinha06 says:

    Well… I think the one and only right and perfect solution (for me) is:

    html { overflow-x: hidden;

              overflow-y: scroll; }

    Now everything is exactly as I wanted it..

    Thanks ๐Ÿ™‚

  38. xwxw says:

    Thank you very much~!

  39. Ron says:

    For the one and only solution:


    I’ve tried it, works briliantly.


  40. Tom says:

    Thanks very much for this solution – short and simple. It works perfekt on my project.

    Found it via Google. It was on the first position for ‘ie frame horizontal scroller’. That rocks.


  41. Sebastian says:


    I tried putting html { overflow-y: scroll; } just behind the tag, but it doesn`t work.

    The site consists of a frame, in which is shown another site.

    The aim is to hide vertical and horizontal scrollbars using the Firefoxbrowser.

    As I?m a beginner in Webdesign I appreciate any suggestion.

    Thanks, Sebastian

  42. Joen says:


    The overflow-y property only works for Internet Explorer.

    Try this. Paste the following code somewhere in your html document:


    html {

    overflow: hidden;



    Edit: Fixed code mistake.

  43. chuchurex says:



    Muchas gracias, por informar acerca de este bug, y estas 3 buenas soluciones. Yo estaba desesperado intetando solocionar el problema, casi opto por eliminar el DocType, gracias a ti he podido encontrar una buena soluci?n a mi problema.

  44. Chris says:

    OK – here’s a stumper for you !!

    Take a typical, dead simple, bog standard 2 page frameset such as :

    All you want is to do is load a clients website that needs to vscroll but NOT hscroll into the main frame, while hiding a little tracker invisibly minding it’s own business and hurting no-one in the top frame. Can poor little tracker escapes the clutches of IE & M$oft ???? NO – mainframe turns ugly !!

    NB : Methinks the mission impossible here arises in the fact that if you have do NOT have access to the HTML, DOCTYPE or CSS of someone else site – you are snookered !!!

    Oh well, just a case in point. Unless someone out there knows a simple fix? Will just have to use the old meta refresh tag to hide the tracker out of frames completely.

    Cheers ๐Ÿ˜‰

  45. Ed says:

    Fantastic solutions. However while I and it seems other people out there find that html {overflow-x: hidden;} seems to work for a PC version of internet explorer this doesn’t seem to manually eliminate horizontal scrollbars on any browser on the mac. While html {overflow: hidden;} is valid on every platform and browser by no means is the “overflow-x”.

    Cheers, and keep up the great work!

  46. Joe Speroni says:

    I have a mapping application with a single image 1500 pixels wide. There are close to pop-up 1000 DIVs on the map. The coordinates of each DIV is inside the image and the widths vary from 5 to 130 pixels.

    The dispaly works well, but I find it annoying that the horizontal scroll bar seem to cover a width that goes out 20,000 plus pixels. Nothing displays out there; it is all white space. The browsers (I’ve tried many besides IE) seems to think the width of the body is the sum of the widths of the body and all DIVs. I guess this could be the worst case.

    Is there any way to restrict the size of the horizontal scroll. In my case I’d set it to 1500 pixels and be happy that large screen never even need the scroll bar.


  47. Joen says:

    Joe Speroni said:

    Is there any way to restrict the size of the horizontal scroll. In my case I?d set it to 1500 pixels and be happy that large screen never even need the scroll bar.


    If html { width: 1500px !important; } placed in your stylesheet doesn’t work, then I don’t know what will.

  48. Jack Chapple says:

    body { width: 1500px; }

    mebbe, lol

  49. Robert Accardi says:

    Here is another solution I came up with.



    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.

  50. kavi says:

    Great advise, just when i needed it.

    Tkx Guys.


  51. bramick says:

    Robert Accardi said:

    Here is another solution I came up with.



    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.

  52. Harm says:

    Thanx allot!

    *html {



    overflow-y: auto;


    worked for me ๐Ÿ™‚

  53. Gary says:

    Nice little explanation from Adobe:


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

  54. 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?

  55. Tavo says:

    Solution 2b:

    html {

    overflow-y: scroll;

    overflow-x: hidden;


  56. 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 {


    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.

  57. 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.

  58. 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.

  59. 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.

  60. 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.


  61. Richa says:

    Thanks, its gr8

  62. fatih says:

    Allah razı olsun be kardeşim. ๐Ÿ˜€


  63. 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.

  64. 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…


  65. Josh Stodola says:

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


    Best regards…

  66. 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!!!

  67. Alex says:

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

    Much thanks,


  68. 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).


  69. 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.

  70. 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.

  71. fazil says:

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

  72. 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.

  73. htnmmo says:

    By the way.. You do realize this page has a needless horizontal scrollbar because of your search box right? ๐Ÿ™‚

    1. 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.

  74. thank you for this. fixes my problem

  75. ร„rgernis #IE7. Der DOCTYPE sorgt fรผr horizontale Scrollbar, obwohl nicht nรถtig. Die Lรถsungen tun allesamt weh. http://tinyurl.com/yl22dhc

  76. Prowebdesign says:

    You are the man! ๐Ÿ™‚ Thanks a lot!

Comments are closed.