CODEWITHSUNDEEP
htmlcss
Vinay
Vinay

Reputation: 53

background is not support in ie8 only?

I used html code header type and put css for it. then take a background for it. It is well functioning in google crome, mozilla, safari but Background is not working in ie 8 from header. 

<!doctype html>
<html lang="en" class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>ASI India Travels</title>
<style>
html, body, div, span, object, iframe, article, 
footer, header, hgroup, menu, nav, section, summary,
h1, h2, h3, h4, h5, h6, p,
time, mark, audio, video {
   margin:0;
   padding:0;
   border:0;
   outline:0;
   vertical-align:baseline;
}  
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section { 
    display:block;
}
body {
  background-color:#666666;
 }
.container {
  width:875px;
  margin-left:auto;
  margin-right:auto;
}
header{ }
#header {
  background-color:#009966;
  height:275px;
}
</style>
</head>

<body>
 <header id="header">
   <div class="container">
    header
   </div>
 </header>
</body>

Can you please anyone resolve this problem? Thanks in Advance...

Upvotes: 3

Views: 993

Answers (5)

Mark
Mark

Reputation: 6865

You need to do 2 things:

  1. add a script (modernizr) that makes this html5 elements for IE8. You have to download the script
  2. add CSS to make a block level element (that you have allready)

Add this to your <head>

<script src="js/modernizr-1.7.min.js"></script>

Then you can use in your CSS:

 header{
  background-color:#009966;
  height:275px;

Upvotes: 0

Giona
Giona

Reputation: 21114

You can't style HTML5 markup in IE8 and below.

Internet Explorer <9 doesn't know how to render CSS on elements that it doesn't recognize.

Learn more

You need a Javascript polyfill called html5shiv.

Upvotes: 2

agriboz
agriboz

Reputation: 4854

<!doctype html>
<html lang="en" class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>ASI India Travels</title>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]--> 
<style>
html, body, div, span, object, iframe, article, 
footer, header, hgroup, menu, nav, section, summary,
h1, h2, h3, h4, h5, h6, p,
time, mark, audio, video {
   margin:0;
   padding:0;
   border:0;
   outline:0;
   vertical-align:baseline;
}  
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section { 
    display:block;
}
body {
  background-color:#666666;
 }
.container {
  width:875px;
  margin-left:auto;
  margin-right:auto;
}
header{ }
#header {
  background-color:#009966;
  height:275px;
}
</style>

</head>

<body>
 <header id="header">
   <div class="container">
    header
   </div>
 </header>
</body>

You have to support html5 tags in your document. In this case your using header tag which is a html5 element.

You can find more info about html5 via visiting this site.

Take a look at jsFiddle example

Upvotes: 0

ASR
ASR

Reputation: 1811

It is because of your <header> tag. You can include this javascript to work HTML5 tags in IE 8

<script type="text/javascript">
 document.createElement('header');
</script>

Hope this will help

Upvotes: 0

Lian
Lian

Reputation: 1629

try this:

background-color:#xxxxx\0/;

put "\0/" this is one of the hacks in IE8 you can use this link fo more info: IE Hacks

Upvotes: 0

Related Questions