HTML5 and frameborder
CssInternet ExplorerHtmlCss Problem Overview
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.
Css Solutions
Solution 1 - Css
> 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.
> 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
Solution 2 - Css
As per the other posting here, the best solution is to use the CSS entry of
style="border:0;"
Solution 3 - Css
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]-->
Solution 4 - Css
This works
iframe{
border-width: 0px;
}
Solution 5 - Css
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 ... :)
Solution 6 - Css
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.
Solution 7 - Css
style="border:none; scrolling:no; frameborder:0; marginheight:0; marginwidth:0; "