Ingredients for a seamless iframe with no border in IE6:

In most webapp development, you don't want to draw attention to your techniques - iframes are a good example, you don't want a "look ma, a page within a page!" feeling, you just want it to display and look & feel like the rest of your app.

In FF this is easy: the CSS is "iframe {border:0;}". Naturally, this also applies to stuff you add to the DOM via scripting.

In IE, it's a complete pain in the ass, as usual. Not only do you have to set the old-style "like it's 1999!" attributes as follows:

iFrame.setAttribute("border", "0");
iFrame.setAttribute("frameborder", "0");

you also have to set the style on the body of the iframe you loaded, as follows:

body {border:0;}

As if there was any other circumstance in which the border style of your body affects the container. Grr.


Michelle said...

Thank you so so so so so much!

Honestly, I've been staring at the browser window for well over two hours, going insane trying to work out why the border line wasn't disappearing in IE.

Thank you. I am so indebted to you for this nugget of information. Now no one will ever know that my website is chock full of inline frames!!!

Ryan said...

Thank you! This was a huge help... I have a deep hatred for IE. Web design would be much simpler without it!