Question

body {
    background: gray; 
    font-family: sans-serif;
    width: 960px;
    margin: auto;
}

header {
    background: green;
    border: 10px solid black;
}

nav {
    margin-top:10px;
    background: #62D99C;
    border-radius: 10px;
    padding: 10px;
}

Header and nav background does not work in IE8. It does work in Chrome and FF. What should I do?
Thanks!

Answer 1

You should apply display:block to the header and nav elements:

header {
  display: block;
  background: green;
  border: 10px solid black;
}

nav {
  display: block;
  margin-top:10px;
  background: #62D99C;
  border-radius: 10px;
  padding: 10px;
}

It seems you also need to include the following js:

<!--[if lt IE 9]>
<script>
  document.createElement('header');
  document.createElement('nav');
</script>
<![endif]-->

The reasons for this can be found here:

http://tatiyants.com/how-to-get-ie8-to-support-html5-tags-and-web-fonts/

Put simply, IE8 doesn’t support HTML5 elements by default, but by having this javascript execute (only for IE8 or less) it starts to recognise those elements. Most developers use some form of html5 shim to fix this.

http://code.google.com/p/html5shim/