Solved

100% width iframe overlapping scroll bars in overflow div

Posted on 2008-10-06
7
2,297 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
  • 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
Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 

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

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Changing Color of Page Section 4 23
Google Page Speed Insight with srcset 4 81
Insert Button on a table 16 36
Easy css question moving title underneath an image 3 11
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…
Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

808 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