If you had a look at the source code of my site you might have noticed the use of some new HTML 5 elements. Nothing fancy, just trying to add some more semantic value to the different parts of a WordPress theme. The sidebar for example is no longer wrapped in a div element but is now wrapped in an
HTML 5 is far from finished (ishtml5readyyet.com, make sure to check the source too) and thus not all major browsers support the new element tags. Internet Explorer for example has problems seeing and thus styling the elements, resulting in a messed up layout. Luckily, there’s an easy fix.
IE fix for HTML 5 elements
<head>), IE will have no problem styling these HTML 5 elements.
createElement() to create the elements, this goes as followed:
document.createElement("header"); // repeat for all used html5 elements
That’s one way to do it.
Another way is to use the HTML 5 shiv that’s hosted on googlecode by Remy Sharp. 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 script uses conditionals itself too so if you leave out the IE conditionals the script will still not run for FireFox 3+ or WebKit browsers.
Happy HTML 5 theming!