?
Solved

IFRAME horizontal scroll bar always appears in IE6 on PC regardless of content width

Posted on 2005-03-23
22
Medium Priority
?
869 Views
Last Modified: 2012-06-21
I have a page with an embedded IFRAME coded as follows:

<iframe src="framecontent.html" width="505" height="380" frameborder="0"></iframe>

The target page contains a table of 483px wide with only text contained therein.

I have tested this page on a PC & Mac on with all popular browsers. For some reason on IE (specifically IE6 on XP Pro) when the vertical scroll bar appears so does the horizontal, even though the content does not exceed the size of the frame.

I have tried reducing the width of the table but the scroll bar remains. Is this a "feature" of IE?

Is there a way to control the scroll bars independently? I do have some pages that need to scroll vertically and some that do not, but certainly I do not need any horizontal scrolling.

Thanks,
James
0
Comment
Question by:jamest521
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 9
  • 8
  • 4
  • +1
22 Comments
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 13616643
<iframe src="framecontent.html" width="505" height="380" frameborder="0"
style="overflow-x:hidden"></iframe>

If that does not solve it, the you will probably have to do it the hard way and modify the body tag of the page being loaded:

<body style="overflow-x:hidden">

Cd&
0
 

Author Comment

by:jamest521
ID: 13616887
Well, I tried every possible combination of your suggestion:

In the body tag of the page containing the IFRAME
In the body tag of the page that fills the IFRAME
In the style sheet on both pages

And unfortunately the horizontal bar is still there...

0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 13617209
Give ua a link to the page so we can see what is going on please.

Cd&
0
WordPress Tutorial 4: Recommended Plugins

Now that you have WordPress installed, understand the interface, and know how to install new parts, let’s take a look at our recommended plugins.

 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 13617507
That generated code.  You used Dreamweaver.

1.  Put in a full doc type so you are not rendering in quirks mode.
2. run the page through a validator at www.w3c.org and cleanup the DW garbage.
3. Once the code is clean it may correct it self.  IF not at least we will have something we can work with.

Cd&
0
 

Author Comment

by:jamest521
ID: 13617541
OK - will do...thanks so far!
0
 
LVL 23

Expert Comment

by:sciwriter
ID: 13618483
I've encountered the same problem -- you should use something like this --

<IFRAME name="list" id="list" src="list.html" width="120" height="500" bgcolor="transparent" border="0" frameborder="0" marginheight="0" marginwidth="0" scrolling="NO">     </IFRAME>

The key there is scrolling = NO.

If you declare the Iframe a lot longer than you want it (assuming you have the room on the page), it will cover most scenarios.  If you declare the SCROLLING=AUTO  -- which is another option, it might work better for you.

That means the Iframe will show no scroll bar if the size is less than the height, if it is near, equal or greater, it will show the scroll bars.

On word of caution -- I have found that declaring the Iframe features is a class style declaration does not do it for all features.  Some need to be declared right in the Iframe declaration, as I have shown you above.  Experiment to see which will work in the CSS style decaration, and which won't.

0
 

Author Comment

by:jamest521
ID: 13622350
As you probably saw from the sample page, I am limited by the page size so the IFRAME height cannot be changed. Using the paramters you suggested leaves me with no scroll bars and fixed conent. Switching to AUTO of course brings back both x & y scroll bars.

Did you manage to get your x scroll bard to disappear in your scenario?

Cheers,
J
0
 
LVL 23

Expert Comment

by:sciwriter
ID: 13624227
Yes, because the screen was wider than the display size.  You don't have to use that fixed width, my point was, you can calculate the width based on your size of display.  If you have to make the box wider than the display size, the scroll bars will always show.
0
 

Author Comment

by:jamest521
ID: 13624329
I guess this is where my expertise runs out. I am not sure how to adjust width, etc. based on screen size. In other words, I'm not getting it.  Sorry.

Thanks,
J
0
 
LVL 23

Expert Comment

by:sciwriter
ID: 13624664
I guess the reason I was confused, thinking you meant the vertical scroll, is because I don't see the horizontal one.  But sure enough, pop into IE, and it is there.  So I'm sorry for misunderstanding which one you wanted to eliminate, seeing only one.

Other than trying the suggestions above, you could try fine tuning the display width in the page loading into the iframe, since it is close to the iframe size, IE is defalting to showing the horiz scroll.  eg. 480.

Also, do you have one of these at the top of your document --  
"http://www.w3.org/TR/html4/strict.dtd"
"http://www.w3.org/TR/html4/loose.dtd
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

Those will cause IE to render differently, as also noted above.
0
 

Author Comment

by:jamest521
ID: 13624871
I have added the DOCTYPE statement - no change to the scroll bar display.

As you might have guessed, I have played with the width of the page that loads into the IFRAME, reducing it to as much as 200px wide, I have included only text and not the table and text that is there now, and so on - no change to the scroll bar under any circumstances to date.

FYI: pages in question are:

Main page:      http://lextranet.mjusa.com/smarttools/lextranet/benefits.html
Frame page:   http://lextranet.mjusa.com/smarttools/lextranet/benefitsframe.html

J
0
 
LVL 1

Expert Comment

by:chrome_gecko
ID: 13647151
as sciwriter pointed out that is what to do...

incase you misread what sciwriter said,

try the

"http://www.w3.org/TR/html4/strict.dtd"
"http://www.w3.org/TR/html4/loose.dtd

in the place of the "http://www.w3.org/TR/html4/frameset.dtd" statement

I have also had this problem with IE, but when using a better browser *Firefox* you never get those problems
0
 
LVL 23

Expert Comment

by:sciwriter
ID: 13647476
Chrome -- tell me this -- I had an Iframe working perfectly without ANY DTD specification.  It still does.  But when I put either strict or loose DTD in the top -- the Iframe doesn't even show to the correct height!!!  Mine is about 1200px high, and when I specify strict OR loose, it chops it down to about 100 pixels high.  That is VERY baffling, since I specificed the height BOTH in the <TD> enclosing the Iframe, and in the Iframe itself !!!!  :(
0
 

Author Comment

by:jamest521
ID: 13671936
Tried the alternate specification in both the pages - no difference. I have of course tested this site cross-platform/cross-browser and I have obsevred the other conmbinations displaying the page without the H scroll bar.

However, the web site in question is a front end to a site that relies heavily on ASP and Active X controls and as such site visitors are expected to use IE. (Regrettaby that part of the site is out of my hands). So the customer wants a site that works in IE first and everything else second.

Thanks for all the input but I am now at a loss as to how to fix this issue.

Cheers,
J


0
 
LVL 23

Expert Comment

by:sciwriter
ID: 13674322
<<<iframe src="framecontent.html" width="505" height="380" frameborder="0"></iframe>
The target page contains a table of 483px wide with only text contained therein. >>

The width of the Iframe needs to be no wider than the table or <TD> width that the Iframe is going into.  Can you not make this adjustment?
0
 

Author Comment

by:jamest521
ID: 13674441
I adjusted the IFRAME to 450px wide. I adjusted the content page to 400px wide. The scroll bar is still there....

J
0
 
LVL 23

Accepted Solution

by:
sciwriter earned 2000 total points
ID: 13674503
You might be interested in something I recently discovered.  I had an Iframe in a table working perfectly in both browsers, just as you are wanting to do.  Then I was experimenting with different IE renderings using the two DTD's mentioned above.  Putting either loose or strict in caused IE to completely screw up the Iframe rendering.  It shrunk to less than it's width, and only about 20% of its height.  I did not try the frameset DTD spec, because all I had to do was remove ALL such specs, and the Iframe rendered perfectly once again.  In other words, nothing in the header but --

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML> ..etc
0
 
LVL 23

Expert Comment

by:sciwriter
ID: 13674524
And I forgot to mention, scroll bars appeared, whereas I had no scroll bars before, and had even specificed SCROLLING = "NO"  -- which was apparently ignored when a DTD was specified....
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 13674631
Do the arithmetic.
As I look at the page:
the iframe is constrained to a width of 450 px
The primary element in the content page is 400 px --- this is irrellevant because
the heading line declares to cell widths 18 and 465 ======> 483 px

IE expands a table to fit the more granular cell specifications there fore the width of the table and th content is 483 and it is going to be 483 as long as the cell widths add up to 483 and the iframe is going to need scrollbars at any width less than 483 ( probably a little mor given IEs weak box model).

Cd&
0
 

Author Comment

by:jamest521
ID: 13681437
Thanks to all for the comments - turns out that sciwriter nailed it withthe doctype statement without any specific doucment attached.

J
0
 
LVL 23

Expert Comment

by:sciwriter
ID: 13682793
Amazing but true!  Glad I helped.
0

Featured Post

Want to be a Web Developer? Get Certified Today!

Enroll in the Certified Web Development Professional course package to learn HTML, Javascript, and PHP. Build a solid foundation to work toward your dream job!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…

765 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question