IE not styling HTML5 tags (with shiv)

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?

Answers


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;


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;.


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;
}

Need Your Help

Is Java 7 using Tim Sort for the Method Arrays.Sort?

java arrays sorting timsort

I can't find the documentation of Java 7, I can only find about the Java 6, which is still quick or merge. Does anyone know how to find the documentation of the method Arrays.sort in Java 7?