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.
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!
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 -:)
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!
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!
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.
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.
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.
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.
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.
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.
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. =)
matey, so glad you provided this lucid solution. Me nuts I scratch no more, and boy are they sore. Cheers. Statue erection commenced.
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?
Frank,
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.
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
Wow, good call! That works perfectly!
Thanks for your comments.
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!
Elena
Elena,
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…
Sorry.
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
One more solution without cons (as far as I can see):
Just delete the second line of your doctype definition. Instead of
Just shorten it to:
This also works if your styled scrollbars don?t appear in IE 6.0
Kind regards from Austria
eliZZZa
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.
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!
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.
Cheers,
- Bill
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.
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!
Alex
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.
Sincerely,
Jiman
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
Jiman
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
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.
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!
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
Thanks. Great tips.
Hi
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. =)
-Alissa
Hi,
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!
Frank
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:
http://www.GoToPower.net/disc_viewt.asp?mid=181
Darius Livescu
Darius@PowerSupplies.net
[...] Der Internet Explorer, ohnehin reich an Fehlern und Missinterpretationen von Web-Standards, zeigt eine horizontale Scrollleiste an, wo gar keine sein muss. Betroffen sind Seiten, die im Doctype XHTML 1.0 Transitional geschrieben sind und Frames enthalten oder als Popup aufgerufen werden. Ein Beitrag bei noscope.com hilft mit dem ein oder anderen Workaround. [...]
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 ++.
Prash
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
Thank you very much~!
For the one and only solution:
http://www.gotopower.net/disc_viewt.asp?mid=181
I’ve tried it, works briliantly.
Ron
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.
Tom
Hi,
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
Sebastian,
The overflow-y property only works for Internet Explorer.
Try this. Paste the following code somewhere in your html document:
<style>
html {
overflow: hidden;
}
</style>
Edit: Fixed code mistake.
Thanks!!!!
Hola
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.
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
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!
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.
Aloha,
Joe Speroni said:
If
html { width: 1500px !important; }placed in your stylesheet doesn’t work, then I don’t know what will.body { width: 1500px; }
mebbe, lol
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.