Squashing Borders on Dynamic iframes
Ancient Post Alert! This entry was published 17 years ago and contains technical information that may no longer be accurate. Proceed with caution.
iframe. So we meet again. How is it that you’ve managed to survive for so long? Hiding underground for what seems like ages at a time, then suddenly uncoiling to reveal yourself and striking the unsuspecting Web developer from out of nowhere?
I’m in the middle of a project right now that, for various reasons, requires one of these little beasties for displaying some remote pages. The
document.createElement. No trouble there. Straightforward enough.
What wasn’t so simple was getting it to display as intended. You can use CSS to cover almost all the bases with
iframe except that butt-ugly border certain browsers find it necessary to add no matter what styles you apply (cough, cough—Internet Explorer—cough, cough). The only surefire way around this is to set
frameborder="0" on the
iframe element itself. Presentational attributes in the markup. Ugh. Oh well, can’t win them all, right?
From here I chopped everything up into the appropriate
The borders are back.
But only in Internet Explorer.
So if you don’t want borders popping up on your dynamically generated
var foo = document.createElement("iframe"); foo.setAttribute("src", "bar.html"); foo.setAttribute("frameBorder", "0");
All this despite the fact that the very same attribute is all lower case when in it’s in the markup.
Sure. Makes perfect sense to me.