Solved

100% width iframe overlapping scroll bars in overflow div

Posted on 2008-10-06
7
2,289 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
Comment Utility
This also occurs if the inner element is just a div instead of an iframe.
0
 
LVL 44

Expert Comment

by:scrathcyboy
Comment Utility
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
Comment Utility
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
What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

 

Author Comment

by:eChalk
Comment Utility
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
Comment Utility
" 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
Comment Utility
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
Comment Utility
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

What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

Join & Write a Comment

Suggested Solutions

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
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 receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

771 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

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now