The Problem

I was editing the CSS of a SECTION element in a WordPress theme that was supposed to be HTML5-ready the other day and couldn’t get the changes to appear. Convinced that I must have misspelled the class name somewhere, I spell checked and went on a copy/paste frenzy. Still no luck.

The Solution

But luckily, once I found the fix, it was easy. HTML5 elements must have their display property set to block. Just add the following snippet toward the top of your CSS file (taken from the HTML5 Boilerplate):

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}

But Wait. Our Good Friend, Internet Explorer isn’t Done Yet

If you (or your theme) haven’t done it already, you’ll need to add some JavaScript so you can style your elements. Otherwise IE won’t know these elements exist.

document.createElement('article');<br /> document.createElement('header');<br /> document.createElement('section');<br /> etc..