This question already has an answer here:
- Blank iFrame in IE 4 answers
My website seems to work in all browsers but IE 8. Everything loads fine by the iFrame.
Here is my HTML code:
<head>
<title> Title </title>
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<script type="text/javascript" src="respond.min.js"></script>
</head>
<body>
<iframe src="http://instagram.com/p/cR5BORA8Ij/embed/"
width="300" height="400" frameborder="0"
scrolling="no" allowtransparency="true" id="myFrame"></iframe>
</body>
Any suggestions on what I could be doing wrong?
Here's a full breakdown:
Steps to Reproduce:
Create a page that has
position:relative
on thehtml
elementHere's a test page in fiddle that does just that:
http://jsfiddle.net/KyleMit/DZbt5/show/light
Now use that page inside of an iFrame and open in IE8
Here's a fiddle that should work in all browsers EXCEPT IE8
Solution:
As the previous answer suggests, you can remove
position:relative
from the original html page, but you might not have access to the page or be able to change it.Instead, you can simply add relative position to the
iframe
element itself:Working Demo in Fiddle - Also works in IE8
Other Instances
Question was also asked here:
From the question iFrame content doesn't show in IE8:
Just remove the following rule from the iframed content: