I have a div in an iframe. The div is supposed to render at 100% width. Looking at the document not in an iframe, the div does indeed render at 100%. When in an iframe however, it renders at 90 - 95%. According to the MS developer tool the iframe, and indeed the body of the iframe document are both at 100%. It's just the div that is not. The HTML:
<iframe frameborder="0"
src="http://localhost:8080/pagedetails/73/true" id="su3-frame"
hspace="0" vspace="0"
leftmargin="0" rightmargin="0" topmargin="0" marginwidth="0">
<html style="margin: 0pt; padding: 0pt;"
xmlns="http://www.w3.org/1999/xhtml">
<body marginwidth="0" marginheight="0" id="su3-body"
leftmargin="0" topmargin="0"
style="margin: 0pt; padding: 0pt;">
<div id="su3-header"
leftmargin="0" marginheight="0"
marginwidth="0" topmargin="0">
</body>
</html>
</iframe>
and the css for the frame and div:
iframe#su3-frame {
width: 100%;
height: 60px;
border: 0;
margin: 0;
padding: 0;
position: fixed;
top: 0; left: 0;
z-index: 100000000;
}
div#su3-header {
font-family: arial, helvetica, sans-serif;
font-size: 12px;
color: #fff;
width: 100%;
height: 56px;
position: absolute;
padding: 0;
margin: 0;
line-height: 1;
top: 0; left: 0;
background: url('/images/bg-90.png');
border: 0;
border-bottom: 4px solid #aaa;
}
Any thoughts, suggestions much appreciated.
Inside your
iframe, you're free to specify whatever doctype you want; you can escape from Quirks Mode, and it won't affect the "parent page".In my test (which I'm not entirely sure matches your test case), changing the first two lines of my document included via
iframeto (for example) these :(that's the HTML5 doctype) puts the
iframedocument into Standards Mode, and fixes the issue.