Reputation: 4783
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
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