Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Background: color does not work in IE8

Tags:

css

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!

like image 529
skyneon Avatar asked Nov 18 '12 11:11

skyneon


1 Answers

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/

like image 68
Pebbl Avatar answered Oct 19 '22 23:10

Pebbl