Solved

100% width iframe overlapping scroll bars in overflow div

Posted on 2008-10-06
7
2,302 Views
Last Modified: 2013-11-19
In the example below the iframe has 100% width and in IE7, the vertical scrollbar of the div is not restricting the width of the iframe when the doctype is specified.  Remove the doctype and it works fine.  How do I fix this in IE7 without using javascript and without changing the doctype?  I just need it working in IE7 for now, not any other browser.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Test</title>
</head>
<body>
    <div style="width: 300px; border: 3px solid green; overflow: scroll;">
        <iframe name="test" width="100%" style="border: 3px solid red;"></iframe>
    </div>
</body>
</html>

Open in new window

iframe-bad.jpg
iframe-good.jpg
0
Comment
Question by:eChalk
[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
  • 4
  • 3
7 Comments
 

Author Comment

by:eChalk
ID: 22654320
This also occurs if the inner element is just a div instead of an iframe.
0
 
LVL 44

Expert Comment

by:scrathcyboy
ID: 22656195
You do not need a DIV encasing an iframe -- and in your case, since you are not using the DIV for positioning, you should remove it.  Try the iframe standing alone, and when you find it works, then we reach the conclusion that various browsers develop or create conflicts between iframes and DIVs that are enclosing them.  An iframe always has high visibility, and if you have DIV menu items dropping down over them, they will not show, as the iframe has precedence, at least in IE6.  You will also find that FF3 and IE7 handle the DIV - iframe problem differently.  If it works without a DIV wrapper, ask if you really need it?
0
 
LVL 44

Expert Comment

by:scrathcyboy
ID: 22656206
Oh, and the other issue is that you are using the DIV to try to scroll the iframe?  This is a No-No -- you have to style the iframe with its own scrolling, as the iframe is an OUT-of-page element (i.e. a separate page), whereas a DIV is an IN-page element.  Basically an in-page cannot correctly control and out-of-page, so you need to think of the iframe is its OWN page (which it is when you put a page into it), so all the scrolling is done by the iframe -- and can be changed extensively in CSS.

Use a DIV wrapper only for positioning the iframe, if you have to, and keep it away from overlapping elements like drop downs.
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:eChalk
ID: 22656526
I control the content of the iframe, setting the innerhtml and then adjusting the height of the iframe to the scrollheight of the inner document's body.  This is a simple version of a more complex page, and the iframe is NOT the only thing in the div.  The point is I NEED the iframe to horizontally fill the div correctly.  I cannot change the setup or layout of the page, nor the doctype.  Is there a workaround?
0
 
LVL 44

Accepted Solution

by:
scrathcyboy earned 500 total points
ID: 22656548
" I cannot change the setup or layout of the page, nor the doctype"

If so, there is nothing you can do, if you can't change the relation between the DIV and Iframe.  Look at the tying you would have saved me above if you had just said this upfront.  Why omit crucial information???
0
 

Author Comment

by:eChalk
ID: 22656561
Sorry, I'll be more clear next time.  My question was not how to lay out my content, but how to make the iframe fill the div correctly.  If it was possible with some other method of css or something.
0
 

Author Comment

by:eChalk
ID: 22656610
Well, I guess I'll have to fix this the same way I fixed position: absolute; top: 0; bottom: 0; in ie6... css expressions!
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

What is Node.js? Node.js is a server side scripting language much like PHP or ASP but is used to implement the complete package of HTTP webserver and application framework. The difference is that Node.js’s execution engine is asynchronous and event…
So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
The viewer will learn how to count occurrences of each item in an array.

688 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