Make sure IE renders unknown elements using namespaces

The new semantic HTML5 elements, such as SECTION are great, but unfortunately IE does not parse them correctly. The result is that the content of these elements 'break out' and become siblings of the element. Another result is that your layout will probably break.

There's a couple of solutions, most noteworthy a Javascript Shim by Remy Sharp et.al.

If you do not want to use Javascript, there's another way using namespaces (yikes!). I first saw this in use by the excellent Dean Edwards who used it to make IE parse the ABBR element

NOTE: This is a test. I know this does not validate (meh!) and it is a bit of a hassle but, compared to targeting your CSS differently or using DIVs or Javascript, it is not too bad.

Thoughts? contact me at @valuedstandards.

Tests

Properly rendered sections should be green. Unknown elements are styled red in IE. The section with namespace should have a green border and background.