css - IE not styling HTML5 tags (with shiv)

Question

I'm trying to style a <header> and it's not working in IE. I'm using Modernizr, but i've tried the shiv by itself.

Example code

<section>
  <header>
    <h1>Title</h1>
  </header>
  <p>Body</p>
</section>

Styled with:

section {
    border: 2px dotted black;
    padding: 0.25em;
}

header h1 {
    background-color: #ccc;
    text-align: center;
    margin: 0;
}

I expect a border around the header and section content, but instead there is just an '[' looking border and the header is beneath it.

Whats going wrong?

Answer 1

With IE, even with the shiv, you need to declare the HTML 5 elements as block elements. I use this line for Internet Explorer, but you can modify it for the elements you need.

header,nav,article,footer,section,aside,figure,figcaption{display:block}

From the Modernizr Documentation:

You’ll also probably want to set many of these elements to display:block;