IE 8 iframe border

Question

There is a border showing on an iframe and I can't get rid of it.

IE 6 and 7 work as intended with a little JavaScript:

function test(){
    var iframe = document.getElementById('frame2');
    iframe.contentWindow.document.body.style.backgroundColor = "#a31d1d";
    iframe.contentWindow.document.body.style.border = "#a31d1d";
    iframe.contentWindow.document.body.style.outlineColor = "#a31d1d";
}

But the border remains visible in IE 8.

Solution 1

Add following attributes to iframe tag:

marginheight="0" marginwidth="0" frameborder="0"

Solution 2

I had the same problem with iframes created dynamically, and it turned out that setting border properties AFTER adding the iframe to the document has NO effect:

The following code shows a 3d border:

var iframe = document.createElement("IFRAME");
iframe.src = "http:www.stackoverflow.com";
//Iframe added BEFORE setting border properties.
document.body.appendChild(iframe);
iframe.frameBorder = "no";

But this actually removes it:

var iframe = document.createElement("IFRAME");
iframe.src = "http:www.stackoverflow.com";
iframe.frameBorder = "no";
//Iframe added AFTER setting border properties.
document.body.appendChild(iframe);

Hope that this would help solve your problem.

Solution 3

I tried loads of variations on this idea and ended up using something along these lines. Thought I'd share it.

<script type="text/javascript">
   url = 'http://www.dollypower.com';
   title = 'Dolly Power';
   width = '660';
   height = '430';
    document.write('<iframe src='+url+' title='+title+' width='+width+' height='+height+' frameborder=0></iframe>');
 </script>

Then I used noscript tags to enter an alternative for non-JS users, i.e:

<noscript><p><a href="http://www.dollypower.com" target="_blank">Please click here for Dolly Power</a></p></noscript>

I tested it in IE8 and it's all cool for me and it also validates.

Hope this might help someone out there!

Solution 4

Success!

Try this. It will find any iframe elements and remove their borders in IE and other browsers (though you can just set a style of "border : none;" in non-IE browsers instead of using JavaScript). AND it will work even if used AFTER the iframe is generated and in place in the document (e.g. iframes that are added in plain HTML and not JavaScript)!

This appears to work because IE creates the border, not on the iframe element as you'd expect, but on the CONTENT of the iframe--after the iframe is created in the BOM. ($@&*#@!!! IE!!!)

Note: The IE part will only work (of course) if the parent window and iframe are from the SAME origin (same domain, port, protocol etc.). Otherwise the script will get "access denied" errors in the IE error console. If that happens, your only option is to set it before it is generated, as others have noted, or use the non-standard frameBorder="0" attribute. (or just let IE look fugly--my current favorite option ;) )

Took me MANY hours of working to the point of despair to figure this out...

Enjoy. :)

// =========================================================================
// Remove borders on iFrames

if (window.document.getElementsByTagName("iframe"))
   {
      var iFrameElements = window.document.getElementsByTagName("iframe");
      for (var i = 0; i < iFrameElements.length; i++)
         {
            iFrameElements[i].frameBorder="0";   //  For other browsers.
            iFrameElements[i].setAttribute("frameBorder", "0");   //  For other browsers (just a backup for the above).
            iFrameElements[i].contentWindow.document.body.style.border="none";   //  For IE.
         }
   }

View more solutions