HTML5 in internet explorer 6
Wow!
You couldn't believe that!
When doing the final checks on the site for Malmö Stad Sommarscen (http://www.sommarscen2010.se) in Internet Explorer 6, it worked almost perfectly at the first attempt! And it's written using a lot of HTML5 tags, like <header> <nav> <section> and <article> !!
Who would have thought that??
OK, here's how we roll:
1. Register tags
Ok, IE6 won't recognize the tags without hassle. You'll need to "register" the tags by running a document.createElement(); on each of the tags you're gonna use before you can use them:
example:
<script>
document.createElement("header");
</script>
Of course, someone has already done this for us, so i used:
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js" ></script>
<![endif]-->
instead. Yes this code is CDN-hosted and you can hotlink it!
Optimizers!! Yessir we want our JS at the bottom, but this one you'll need to keep in the <head> section, else it won't work!
2. Some "safe" css
Then, in order to make sure the elements behaved as i wanted, i used some CSS:
article, header, section, nav, footer {
display: block;
position: relative
}
3. The double margin float bug:
To make your floats work in internet explorer 6, you'll have to give them half the margin in the direction the elements are floated. For example, if your original css is:
section {
float: left;
margin: 10px 16px 20px 16px;
}
you'll have to follow that up with:
* html section {
margin-left: 8px;
}
Yes the star (*) is THE way to target internet explorer in your css files. First you write for everyone else, then you follow that by * html (tag) – forget about adding an extra stylesheet, adding extra HTTP-requests. This is how we roll!
We'll that's about it!
If you're site is well coded in general, things should work now!
Comments? Better ideas? Tips? Cool! Comment, please!
