# Here's a full breakdown:

## Steps to Reproduce: 

Create a page that has `position:relative` on the `html` element



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

Here'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



    <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 browsers *EXCEPT* IE8][broken fiddle]

## 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:



    iframe {
        position: relative;
    }

### [Working Demo in Fiddle - Also works in IE8][fixed fiddle]

## Other Instances

Question was also asked here:

* [iFrame content doesn't show in IE8][SO1]
* [Blank iFrame in IE][SO2]

[broken fiddle]: http://jsfiddle.net/KyleMit/uqDUL/7/show/light
[fixed fiddle]: http://jsfiddle.net/KyleMit/uqDUL/8/show/light

[SO1]: https://stackoverflow.com/q/11191155/1366033
[SO2]: https://stackoverflow.com/q/4444014/1366033

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?