iframe scrollbars - vertical only?

Hi,
Just a simple question on iframes...
I'm currently testing with ie6 and when the content extends below the bottom of the iframe, I get both vertical and horizontal scrollbars.
Is there any way to make it just show the vertical scrollbar?
I've tried scrolling="vertical" and it does the same thing as no setting (auto).
azaramAsked:
Who is Participating?
 
BogoJokerConnect With a Mentor Commented:
I would love to not just post a link, however this source seems to have covered all of the bases:
http://www.noscope.com/journal/2004/02/ie-horizontal-scrollbar-bug

Make sure that you read that article, because everything is explained as well as the Pros and Cons of the 3 most common solutions.

But in case that source goes down here is the gist of it:
Add this CSS property sto the element:
overflow-x: hidden;
overflow-y: auto;

This will get rid of the horizontal scroll bar and making the verticle scrollbar only available when needed.  The only issue being that if your content really did need a scroll bar it won't show up!  This does however solve the unusual issue with IE that has both scrollbars show up when only the verticle scrollbar is needed.

- Joe P
0
 
jessegivyDeveloperCommented:
You're likely getting the horizontal scrollbar because there is content in your iFrame that doesn't fit within the dimensions of your iFrame.  If you can ensure that the width is less than that of your iFrame the horizontal bar will disapear.  Post code and I'll lookat it if you'd like, tables can expand and cause unpredictable widths.
0
 
jessegivyDeveloperCommented:
Joe has provided a much more excellent solution above, but keep in mind that any content that is hidden and would require scrolling horizontally will be unreachable and could look weird and cut-off.
0
Cloud Class® Course: Certified Penetration Testing

This CPTE Certified Penetration Testing Engineer course covers everything you need to know about becoming a Certified Penetration Testing Engineer. Career Path: Professional roles include Ethical Hackers, Security Consultants, System Administrators, and Chief Security Officers.

 
BogoJokerCommented:
Jessegivy is correct and I fully remember typing that but I must have erased that when I edited my comment.  Thanks jessegivy!
0
 
azaramAuthor Commented:
jessegivy, the content was definitely not extending too far horizontally. Like Bogo said, it's a bug in IE6 that puts up both scrollbars, not just the one that is required.
0
 
azaramAuthor Commented:
Bogo... yeah I think I saw that originally too.

Anyway, thanks, you nailed it.. added the style section below into the head of the iframe source page and it solved it.
Note that adding those style tags to the style of the iframe itself didn't work.
Thanks!!!

<style>
html {
      overflow-x: hidden;
      overflow-y: auto;
}
</style>
0
 
BogoJokerCommented:
That is surprising to me that you did have to add it using html { }.

However adding to html { } should be fine considering horizontal scrolling is considered very bad practice, it ranks number 3 on this list of top 10 bad web design things:
http://www.fenclwebdesign.com/bad-design.htm

And in your case above this wasn't your fault, just IE getting a little too happy with scrollbars.

Thanks for the grade,
- Joe P
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.