For visibility of [Lukx's comment], the real answer is to set `position:relative` on the iframe itself, since you might not have the ability to edit the html source page or it might need to use relative positioning.

Just add this CSS and you should be all set:



    iframe {
        position: relative;
    }

I wrote up a full description of the problem in [this answer][my answer]

[Lukx's comment]: https://stackoverflow.com/questions/11191155/iframe-content-doesnt-show-in-ie8#comment31508114_11205602
[my answer]: https://stackoverflow.com/a/23817415/1366033

I have a site with an iFrame.

The host page has some very basic JS on it, the iframed page has simple JS too.

When I embed the iframe as usualy: `<iframe src="iframeURL" width="900" height="1000"></iframe>` it works fine in all browsers but IE8.

I tried various things:

- first: disabling all JS
- removing src attribute and adding it with JS
- using `<object>` instead
- I used proxy.php to make the content appear as if it were coming from the same domain

It doesn't work in IE8 regardless what I do.

The funny thing is that I can open the page I want to iframe in a separate tab and works just fine.

If I change the src attribute to "some_other_random_page_from_internet" it works.

The other thing is that both host and iframe use postMessage to communicate and I can see the communication is working OK, it's just the content which doesn't show, but when I inspect the page source with developers tools I can see the content is there.

Is it possible that the content of the iframe causes issues? It's a basic HTML + basic JS, with JS disabled it shouldn't be an issue.

Any ideas what else I could check?

PS. I can't show the code (NDA , etc)

iFrame content doesn't show in IE8

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