It’s finally time to give it a test in Internet Explorer, let’s see how it looks like…

WHAT??? That looks a lot worst than I was expecting… What the heck is going on?

You try changing your css, but explorer doesn’t change at all… You verify if you’re actually working on the right file, and yes in deed, you are. You try to add some basic css properties, but again, it doesn’t change a bit. The problem is…

Internet Explorer completely ignores html5 new tags

OMG! Until when this stupid browser is going to give me head aches – you say out loud.

At this point you have two options:

1. Change your entire markup and css to use old tags
2. Use Remy Sharp’s fix. The only downsize: It completely depends on Javascript

IE simply ignores all the elements it doesn’t recognize, regardless of CSS. By using javascript’s function document.createElement(), we iterate through the markup and recreate all the tags that are not recognized by IE.

Quick copy/paste solution

Here is the code taken directly from Remy’s site:

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

I’m thinking it might be a good idea to condition the code to IE versions lower than 8, since IE9 will have html5 support and it might be coming soon, but that’s up to you:

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

I feel stupid for not being aware and for not testing earlier in IE. It took me a while to figure out what was going on.

Get more information from this sites:
http://net.tutsplus.com/tutorials/html-css-techniques/how-to-make-all-browsers-render-html5-mark-up-correctly-even-ie6/
http://remysharp.com/2009/01/07/html5-enabling-script/

I found this cool website where I read that ie7 does something weird with the stack order when it renders the page and solves the problem using jQuery. Surprisingly I just copied and pasted the code (after analyzing it of course) and it fixed my problem!

Here is the code! for more details on this solution go to Vance Lucas Website

$(function() {
	var zIndexNumber = 1000;
	$('div').each(function() {
		$(this).css('zIndex', zIndexNumber);
		zIndexNumber -= 10;
	});
});