HOME RSS  Twitter 
<< The Egg   Nintendo 3DS Pre-Order >>  

HTML5 Validation and iFrame frameborder property in ie8

Lately I've been involved in a major HTML5 overhaul for one of my site and my main focus has been ensuring that the pages validate properly according to this new standard. One thing which I came across that was driving me nuts is the fact that Internet Explorer 8 does not allow you to completely eliminate the border of an iFrame using pure CSS techniques. Ironically, IE7 and IE6 were fine, but IE8 was not. If you want to completely eliminate the annoying 3D border imposed on an iFrame in IE8 you need to use the property frameborder=0. While it is a very simple fix and looks fine in IE8, the frameborder property has been discontinued in HTML5.

So I was stuck at a juncture between having all of my pages validate for HTML5 versus an ugly 3D border in my iFrames. Before I continue, allow me to take the stance that while many are completely against using iFrames (they say that using DIVs with overflow:auto and Ajax are better alternatives), I still find several applications where iFrames are necessary. For instance, embedding a Facebook social box plugin, or a Facebook Like button without having to load their JavaScript library and use FBML. Anyways, I found that I desired BOTH a borderless iFrame and HTML5 validation so I crafted a simple workaround using JavaScript.

For example, here is what was causing validation to fail:
<iframe src="http://someurl" frameborder="0" style="border:none; overflow:hidden; width:500px; height:27px;"></iframe>

Using Javascript's document.write method I was able to embed the iFrame using JavaScript and still pass HTML5 validation. Until this bug is removed from IE8 (if ever) or IE8 no longer comprises the majority of my visitor base I see no alternative at this point. And of course, this workaround will prevent the iFrame from rendering for users who do not have JavaScript enabled (perhaps about 5% or less of the population).
<script type="text/javascript">
document.write("<iframe src=\"http://someurl\" frameborder=\"0\" style=\"border:none; overflow:hidden; width:500px; height:27px;\"></iframe>");

I was not able to find a solution to this everywhere I looked so I hope this helps someone with my same predicament!

Tuesday, September 21 2010 5:37:52 PM in Software Dev

Related Posts:
First Day of Launch 10/11/2007 7:32:57 PM


Home Page
Nintendo 3DS Pre-Order
HTML5 Validation and iFrame frame...
The Egg
The Physics of Light and Time Tra...

Previously ...
Intention vs Expectation
Mystery DLL Strikes Again
NvRaser.dll - Mystery File ...
Quantum Pajamas
The Move Towards Individual Sover...
The Origin of Consciousness
Miracle Food Recipe? Space Syrup
Why You Are So Important
Stubborn Theology
Strict Science

Blogging (2)
Clarifications (2)
Computing (2)
Encouragement (1)
Food (1)
Gadgetry (3)
Health (2)
Internet Marketing (1)
Life (6)
Philosophy (11)
Recipes (1)
Science (3)
Software Dev (2)
Television (2)
Travel (7)

September 2011
January 2011
September 2010
August 2010
June 2010
May 2010
March 2009
February 2009
July 2008
March 2008
November 2007
October 2007

Eckhart Tolle
The Library of Halexandria

Twitter Updates

    Copyright © 2017 TheFreedomWriter.com