2005/11/24

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.

1 comment:

Ryan said...

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