HTML 5 & Internet explorer

[Attila Hajzer]

So i have been updating my websites with some of those new HTML 5 codes like

and i have been using chrome when i designed. so that was the only view i have seen it in. i stopped using IE for viewing. and have been working on a client site (to be exact it was my Bosses website) and i sent him a link. and his assistant one aswell. (last week). earlier today, i wanted to see how well it looked at my friends house on their computer (res wise) and their default web browser was Internet Explorer. I looked at the website. and it looked so out of place it was discusting. i was So shocked! i felt like the worst designer ever. i for some reason i though that IE didn’t accept the Center hack with CSS

margin: 0 auto; padding:0;

width:300px;

but i used the same thing for the div “Content”. so i was stumped. then came to the conclusion that i used a div. not just a predefined tag. (like html or body) a default one. a div. with an id. so i changed the html to

and it seemed to fix the internet explorer issue. so i was pleased. I have not yet tried to give the actual

tag an id like this :

THIS IS THE HEADER

but I think I’ve done enough experimenting for now. Something i also found out was that you cant give them Background images. you must put it into the div.

thats just my input.
i hope it help some of you. i decided to put this here because i know a lot of people are on this site and use it for help.

Chris Coyier, could you please somehow post this? somewhere on your site (after maybe checking it out yourself and / or editing it ?

[clokey2k]

For HTML5 to work in IE you need to use a shiv :http://code.google.com/p/html5shiv/

AND declare the header, article… etc… as ‘display:block’ elements, as IE treats them as inline. Thats why putting the ‘div’ inside cured it.

You can go back to being a super cool web designer again :).

[Rob MacKay]

Yes @clokey2k is right – you really need to declare all HTML 5 elements as either inline, block or inline-block. Chrome (webkit) automatically sets them as block when you have nothing set, so you kinda get a false sense of security with that :)

Firefox will also treat them as inline by default and so break your display :)

[chendrix]

If you are going to use HTML5, and use a browser reset, look at using an HTML5 reset (I use http://html5doctor.com/html-5-reset-stylesheet/) It includes the new HTML5 tags, and sets them as display: block automatically.

[sixeightzero]

You can fix it by putting in your css:

header{

display:block;

}

[Author]

Posts