Geek Answers Handbook

IFrame Not Loading IE 8

My site seems to work in all browsers, but IE 8. Everything loads fine with 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 might be doing wrong?

0
source share
2 answers

Here's the full breakdown:

Playback steps:

Create a page with position:relative in the html element

 <html style="position:relative"> <head></head> <body>TEST</body> </html>

Here's a test page in a script that does just that:

http://jsfiddle.net/KyleMit/DZbt5/show/light

Now use this page inside iFrame and open in IE8

 <html> <head></head> <body> <iframe src="http://jsfiddle.net/KyleMit/DZbt5/show/light/"></iframe> </body> </html>

Here's a fiddle that should work in all EXCEPT IE8 browsers

Decision:

As the previous answer suggests, you can remove position:relative from the original html page, but you may not have access to the page or be able to change it.

Instead, you can simply add a relative position to the iframe element itself:

 iframe { position: relative; }

Working demo in a script - also works in IE8

Other instances

The question was also asked here:

  • IFrame content not showing in IE8
  • Empty iFrame in IE
+1
source

From the question, iFrame content is not displayed in IE8 :

Just remove the following rule from iframed content:

 html { position: relative; }
0
source

More articles:


All Articles