HTML5 and frameborder

Question

I have an iframe on an HTML5 document. when I validate I am getting an error telling me that the attribute on the iframe frameBorder is obsolete and to use CSS instead.

I have this attribute frameBorder="0" here because it was the only way I could figure out how to get rid of the border in IE, I tried border:none; in CSS with no luck. Is there a compliant way to fix this?

Thanks.

Eason

Answer 1

HTML 5 doesn't support attributes such as frameborder, scrolling, marginwidth, and marginheight (which were supported in HTML 4.01). Instead, the HTML 5 specification has introduced the seamless attribute. The seamless attribute allows the inline frame to appear as though it is being rendered as part of the containing document. For example, borders and scrollbars will not appear.

According to MDN

frameborder Obsolete since HTML5

The value 1 (the default) draws a border around this frame. The value 0 removes the border around this frame, but you should instead use the CSS property border to control borders.

Like the quote above says, you should remove the border with CSS;
either inline (style="border: none;") or in your stylesheet (iframe { border: none; }).

That being said, there doesn't seem to be a single iframe provider that doesn't use frameborder="0". Even YouTube still uses the attribute and doesn't even provide a style attribute to make iframes backwards compatible for when frameborder isn't supported anymore. It's safe to say that the attribute isn't going anywhere soon. This leaves you with 3 options:

1. Keep using frameborder, just to be sure it works (for now)
2. Use CSS, to do the "right" thing
3. Use both. Although this doesn't resolve the incompatibility problem (just like option 1), it does and will work in every browser that has been and will be

As for the previous state of this decade-old answer:

The seamless attribute has been supported for such a short time (or not at all by some browsers), that MDN doesn't even list it as a deprecated feature. Don't use it and don't get confused by the comments below.

Franchescafranchise

So is there a way to produce frameBorder=0 in CSS? – Eason

That's really annoying, I'm using the latest Chrome and it just doesnt work. Although frameborder="0" does. – Maroon

revisiting this, seamless does work on chrome ff and safari. Put it in the iframe like so : <iframe seamless – Maroon

Gotta disagree with @RGBK. In my testing, neither IE 9, FF 5, Chrome 12, nor Safari 5 (on Win 7) support the seamless attribute. See this test page for more info: maxdesign.com.au/jobs/seamless – Reinert

"The seamless attribute is currently not supported in any of the major browsers." - w3schools.com/html5/att_iframe_seamless.asp – Openhearth

seamless is not functionally equivalent to frameBorder=0. For example, the CSS from the containing page can cascade into the iframe itself, and links open in the context of the child page. – Tallbott

Your supposed to use border-width: 0px;, but I'm afraid that this is not cross-browser compatible either for use with iframes. seamless is still not supported by all browsers! This is one of those few HTML5 issues that you just have to accept. Use frameborder="0" and the hell with the validation! – Gradient

Thanks Solomon, nice to see one of the original IE6 devs enter the discussion :p – Vann

It is incorrect and misleading to say that this or that specification does or does not “support” some HTML feature. Browsers support things. Besides, HTML5 describes the attributes mentioned (earlier HTML specs do not describe all of them) and encourages browsers to support them (while declaring them as non-conforming, but this is a requirement on documents, not browsers). – Kaylil

seamless has been removed from the HTML5 spec, so there will never be support for it. @ForTheWatch's answer is now the best. – Rubie

Answer 2

As per the other posting here, the best solution is to use the CSS entry of

style="border:0;"

Barri

I think they recommend: border-width: 0px TBH. border: none; will NOT work. – Gradient

@solomon, why are you saying border: none; wont work? It works on firefox and chrome (which is webkit so thats safari and soon to be opera) – Wofford

@Wofford - It doesn't work in IE and Opera (current version), haven't tested in Chrome, Safari, and/or Firefox. I test for the crappy browsers, because if it works in them, than it is almost sure to work in the others. – Gradient

@SolomonClosson I test for the crappy browsers, because if it works in them, than it is almost sure to work in the others. My god that naïve. If you want to make sure your app works in a browser you have to test in that browser, plain and simple. There are no guarantees, only quirks. – Peale

Quick note is that the unit in 0px is redundant. I prefer margin: 0; or border: 0; because 0px == 0em == 0% == 0 when it comes to CSS. – Barri

Now that seamless has been dropped from the spec this is the only correct answer – Rubie

Answer 3

Since the frameborder attribute is only necessary for IE, there is another way to get around the validator. This is a lightweight way that doesn't require Javascript or any DOM manipulation.

<!--[if IE]>
   <iframe src="source" frameborder="0">?</iframe>
<![endif]-->
<!--[if !IE]>-->
   <iframe src="source" style="border:none">?</iframe>
<!-- <![endif]-->

Baud

This is the best answer to the question asked. However, the goal of compliance to HTML5 (which is work in progress and may and will change without notice) is not useful, especially when it makes you use tricks that do not serve any other purpose than such compliance and that make the code more complicated. It is best to keep using frameBorder="0" if you don’t want a border around an inline frame. – Kaylil

Absolutely true. Just want to note that as the frameborder attr is purely presentational, there is not much chance that it will ever return to the HTML standard, no matter how much the standard is changing. – Baud

The attribute is in the HTML5 “standard”: w3.org/TR/html5/rendering.html#frames-and-framesets – Kaylil

@JukkaK.Korpela Wait, what? Then why would the OP get a validation error? Oh, sorry, the page you link to is about frame and frameset, not iframe. The attribute is obsolete on the iframe element; see w3.org/TR/html5/obsolete.html#attr-iframe-frameborder – Baud

The validation error is issued because the feature is declared obsolete, which really does not mean much more than issuing the message. The attribute is still defined in HTML5 and browsers are expected, according to HTML5 CR, to keep supporting it. – Kaylil

Answer 4

This works

iframe{
    border-width: 0px;
}

Coffin

Answer 5

How about using the same for technique for "fooling" the validator with Javascript by sticking a target attribute in XHTML <a onclick="this.target='_blank'">?

• onsomething = " this.frameborder = '0' "

<iframe onload = " this.frameborder='0' " src="menu.html" id="menu"> </iframe>

Or getElementsByTagName]("iframe")1 adding this attribute for all iframes on the page?

Haven't tested this because I've done something which means that nothing is working in IE less than 9! :) So while I'm sorting that out ... :)

Spitter

Answer 6

I found a nice work around that will allow it to work in IE7 here. It bypasses the validator for the frameBorder attribute but keeps css for future browsers as explained in the post.

Tachometer

use JavaScript to generate the iframe? it will further defer the load time of iframe contents for just eliminating a CSS warning message. Like accepted answer says, recommended to use seamless attribute instead. – Sinfonietta

Yes, however seamless was not working for me in IE7 hence my post. – Tachometer