jskidd3
jskidd3

Reputation: 4783

Internet Explorer 8 'background-color' issue

When viewing http://joelkidd.co.uk/test in 75% of browsers, the site look fine. However, as usual, anything less than Internet Explorer 9 and the site looks like a bomb has hit it. I sat down this morning to create a separate stylesheet for it and I am doing that right now, however I have hit a problem (this is my first bit of cross-compatibility work etc).

When I set a background-color on the header element (and other divs, for that matter), it is completely ignored. If you view the site in any (most) other browsers you will see a large velvet background that covers the top 20% (roughly) of the page.

If anyone could tell me why this is happening I'd really appreciate it.

Thanks, Joel

Upvotes: 3

Views: 2589

Answers (1)

Andrew
Andrew

Reputation: 1880

I feel your pain. I think I might know your problem. You need to include this little bit of javasctipt code: https://code.google.com/p/html5shiv/

Because you are using HTML5 tags for example <header> IE6, 7 and 8 have no idea what they mean. By including that little bit of javascript code it will basically make the HTML5 elements appear more like a <div> to IE6, 7 and 8

Of course your other option is to change all of the HTML5 elements to <div> for example: <div id="header"> instead of <header>. This would also mean changing all of your CSS as well.

Upvotes: 3

Related Questions