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;

Answer 2

It depends on what style you're trying to impose on the element. So as James Long put it before, custom elements are inline by default. For IE8 you also could give the element a border by adding display: inline-block;.

Answer 3

Sometimes custom elements (which is how we convince IE to use HTML5 tags) are inline by default. Try adding the following piece of CSS:

section,
header {
    display: block;
}