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.

Answer 1

Add following attributes to iframe tag:

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

Answer 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.

Answer 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!