Using HTML 5 section elements in IE

I am currently reworking the design of my web-site.

Since I am a modern geek, I want to make use of the latest HTML 5 features.

I am especially fond of the new HTML 5 section elements: header, article, aside and footer, which are nicely introduced by this article by Lachlan Hunt from alistapart.com.

The great thing about these new elements is that they can be used in browsers which don’t yet support HTML 5. Because HTML browsers are supposed to handle unknown elements gracefully. They will descend into unknown elements and render all contained known elements. This is how the <applet> tag and <object> tags were added in the early years of Netscape browsers.

This works everywhere, even in IE 7 and 8.

Or more precisely, this works perfectly fine everywhere except in IE 7 and 8 where it only works sort off.

IE 7 and 8 do indeed descend into the unknown elements and render all known contained elements. But they blatantly ignore all CSS styles assigned to the elements or addressing these elements.

For example, something like this does not work:

.article1 { font-weight:bold; }

<article class="article1">Text</article>

And this does not work either:

.aside1 p { color:#777; }

<aside class="aside1">
  <p>Text</p>
</aside>

As a workaround, I am adding div-elements to the section elements, and then style them:

.article1 { font-weight:bold; }

<article>
  <div class="article1">Text</div>
</article>

.aside1 p { color:#777; }

<aside>
  <div class="aside1">
    <p>Text</p>
  </div>
</aside>

This adds a tad of ugliness to the code. But I think I have to live with this until IE 7 and 8 have lost significant market share on my web site.