CODEWITHSUNDEEP
css
skyneon
skyneon

Reputation: 73

Background: color does not work in IE8

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!

Upvotes: 6

Views: 17316

Answers (3)

P.JAYASRI
P.JAYASRI

Reputation: 358

Background color not working on Internet Explorer (IE)

IE apply some filter before rendering web page . that's why some page colors changed .

you can add following line in your CSS class to avoid it.

 filter: none !important;

Upvotes: 0

Pebbl
Pebbl

Reputation: 36005

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/

Upvotes: 10

knittl
knittl

Reputation: 265231

Looks like IE8 does not support features of HTML5 that were not present in HTML4 (this includes the new elments header and nav). See the answer on the question Does IE8 support HTML5 and CSS3?

Try replacing the elements with the old, working way: <div class="nav"> and use the CSS-selector .nav.

Upvotes: 0

Related Questions