IE fix for HTML 5 elements

HTML 5 is far from finished (for those of you that want to know how many days are left till the official release date: check outishtml5readyyet.com, make sure that you check out the source code of the page too) and not all major (or less major) browsers support the new semantic elements yet. Internet Explorer for example has some problems seeing and thus styling the elements, resulting in a messed up layout. Luckily, there is an easy fix for this.

 

IE fix for HTML 5 elements

Because IE 8 and lower does not see the elements it cannot style the elements. Resolving this issue is easy, just create the elements using JavaScript. When you do this before the page is rendered, in the head section of your webpage, IE will have no problem styling our newly created elements. This is called the “HTML 5 shiv”

You can just use the usual JavaScript function createElement() to create the elements you’ve used, this goes as followed:

document.createElement("header"); //repeat for all used "new" elements

That’s one way to do it. An easier way is to use the HTML 5 shiv that’s hosted on googlecode by Remy Sharp. I’m using it myself too. It’s minified and wrapped in conditional tags so it’s only a few bytes that have to be downloaded by browsers like IE 8 and below to be able to render the “new” elements. Just add the following script tags to your head section and all browsers should be fine rendering the “new” HTML 5 elements.

<!--[if IE]>
	<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

The JS script uses conditionals itself too so if you leave out the if IE conditionals the script will still not be ran by FireFox 3+ or Webkit browsers. Happy HTML 5 theming!

 

1. http://dannyvankooten.com/342/ie-fix-for-html-5-elements/
2. http://net.tutsplus.com/tutorials/html-css-techniques/how-to-make-all-browsers-render-html5-mark-up-correctly-even-ie6/ 
3. demo {http://d2o0t5hpnwv4c1.cloudfront.net/543_html5/index.html?1}
4. http://html5doctor.com/how-to-get-html5-working-in-ie-and-firefox-2/
5. http://ejohn.org/blog/html5-shiv/
6. http://remysharp.com/2009/01/07/html5-enabling-script/
7. http://code.google.com/p/ie7-js/
8. http://www.modernizr.com/

Why use Modernizr?

Taking advantage of the new capabilities of HTML5 and CSS3 can mean sacrificing control over the experience in older browsers. Modernizr 2 is your starting point for making the best websites and applications that work exactly right no matter what browser or device your visitors use.

 

IE7.js is a JavaScript library to make Microsoft Internet Explorer behave like a standards-compliant browser. It fixes many HTML and CSS issues and makes transparent PNG work correctly under IE5 and IE6.