I've got a fixed header and footer on my page with a scrollable content area in between. When ever I embed a pdf into the content area and try to scroll it the pdf floats above the fixed header/footer instead of going underneath it.
I was able to solve this in IE6 by placing an IFRAME between the header and content pages and ensuring that the IFRAME had a z-index between the content and header. This no longer seems to work in IE7. I've tried it with an embedded word doc and I get the same results so I'm guessing it's going to be the same with any embedded object. I've put my code below. In it I've tried to simply emebed the object straight onto the page as well as trying to embed it within an IFRAME and setting the IFRAME to below that of the headers, but still no joy.
What makes it more intriguing is that on page load the pdf sits under the header/footer, it's only when you start to scroll that it then sits above ????.
Any ideas/suggestions much appreciated.
<!
DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><
htmlxmlns="http://www.w3.org/1999/xhtml"><
head><title>IE7 Embedded PDF Problem</title><style>html, body { margin:0; padding:0; height:100%;
background-color:#F2F5F6;
}
html>body#wrap {height:100%;}
html>body#header {
background:#336699;
border-bottom:1pxsolid#000;
width:100%;
height:80px;
position:fixed;
z-index:10;
}
html>body#iframeheader {
width:100%;
height:80px;
position:fixed;
z-index:9;
}
html>body#content-wrap {height:100%;}
html>body#contentdiv {padding:81px10px;}
html>body#footer {
background:#172B46;
width:100%;
height:30px;
position:fixed;
bottom:0;
z-index:10;
}
html>body#iframefooter {
width:100%;
height:30px;
position:fixed;
bottom:0;
z-index:9;
}
html>body#iframetest {
width:500px;;
height:400px;
position:relative;
z-index:-1;
}
</style>
</head>
<body>
<divid="wrap"><formid="form1"runat="server">
<iframeid="iframeheader"src="javascript:false;"frameborder="0"scrolling="no"></iframe><divid="header">
<p>
Title Bar
</p></div><divid="content-wrap"><divid="contentdiv">
<br/><embedstyle="z-index: -1;"src="http://www.adobe.com/products/acrobat/pdfs/pdfaccess.pdf"width="500"height="375"></embed><iframeid="iframetest"src="http://www.adobe.com/products/acrobat/pdfs/pdfaccess.pdf"width="500"height="400"style="z-index=-1;">Test Iframe </iframe></div></div><iframeid="iframefooter"src="javascript:false;"frameborder="0"scrolling="no"></iframe><divid="footer">Content
<pstyle="width: 50%; color:White;"align="right">
Footer
</p></div></form></div></
body></
html>