Solved

100% width iframe overlapping scroll bars in overflow div

Posted on 2008-10-06
7
2,294 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
PRTG Network Monitor: Intuitive Network Monitoring

Network Monitoring is essential to ensure that computer systems and network devices are running. Use PRTG to monitor LANs, servers, websites, applications and devices, bandwidth, virtual environments, remote systems, IoT, and many more. PRTG is easy to set up & use.

 

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

VMware Disaster Recovery and Data Protection

In this expert guide, you’ll learn about the components of a Modern Data Center. You will use cases for the value-added capabilities of Veeam®, including combining backup and replication for VMware disaster recovery and using replication for data center migration.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Custom Form Design to Match this example 1 22
To remove highlight from a "a href" 5 30
Change of column alignment in div 2 18
flex div overflows its container 4 21
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
JavaScript has plenty of pieces of code people often just copy/paste from somewhere but never quite fully understand. Self-Executing functions are just one good example that I'll try to demystify here.
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

770 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