I have found the technique of putting iframes on top of an iframes to get round the z-index problem browsers have with iframes.
The problem I am facing now is I need the the iframe that overlaps a PDF (loaded into an iframe) to be transparent. Is this possible??
The reason I want to do this is so I can have a transparent png over the top of the PDF
Below is some code so that you can see my problem - you will see a white square in the top left hand corner of the PDF.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#contentFrame
{
height:500px;
width:990px;
}
#overlapFrame
{
width:100px;
height:100px;
position:absolute;
left:0;
top:0;
background: transparent;
}
</style>
</head>
<body>
<iframe src="http://www.education.gov.yk.ca/pdf/pdf-test.pdf" id="contentFrame" frameborder="0"></iframe>
<iframe id="overlapFrame" frameborder="0" scrolling="no"></iframe>
</body>
</html>