CODEWITHSUNDEEP
cssinternet-explorerhtml
JD Isaacks
JD Isaacks

Reputation: 57994

HTML5 and frameborder

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.

Upvotes: 96

Views: 143171

Answers (6)

Mr Lister
Mr Lister

Reputation: 46589

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]-->

Upvotes: 18

Sotiris
Sotiris

Reputation: 40086

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.

Upvotes: 74

csharpforevermore
csharpforevermore

Reputation: 1524

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

style="border:0;"

Upvotes: 52

Harry Bosh
Harry Bosh

Reputation: 3790

This works

iframe{
    border-width: 0px;
}

Upvotes: 6

Harry Alffa
Harry Alffa

Reputation: 61

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 ... :)

Upvotes: 2

sareed
sareed

Reputation: 780

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.

Upvotes: 0

Related Questions