Question

I’m not sure why it won’t load my background color nor image if I’m not using multiple backgrounds on 1 element. (“IE8 and earlier do not support multiple background images on one element.”)

#header1 {
  background: #191919 url(Site-in-development.png) left no-repeat;
  padding-top:15px;
  border-bottom: 1px solid white;}

Even when I remove the img and leave only the color it won’t display. Any ideas?

http://www.nobodyfilm.org/overview-and-production.html
(If you have IE9 press F12 and you can change it to IE8 and or 7.) Thanks!

Answer 1

IE8 doesn’t recognise the <header> element (or any of the other HTML5 elements). IE8 is simply not seeing the element, no matter how it is styled. You need to use something like html5shiv to make IE8 pretend to be a modern browser.

Including the html5shiv JavaScript file in a page can be achieved like so:

<!--[if lt IE 9]>
<script src="html5shiv.js"></script>
<![endif]-->

Also see http://blog.whatwg.org/supporting-new-elements-in-ie for a bit more background (no pun intended) on what the shiv does.