Grow your CSS skills. Land your dream job.

HTML 5 & Internet explorer

  • # December 13, 2010 at 11:50 pm

    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 :

    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 ?

    # December 14, 2010 at 12:02 am

    It’s not only great to be up to date with all the latest technology and look like the whiz kid on the block, html5 and css3, it’s also a necessity.
    But when you want to impress the boss, just be sure that all your new technology is cross browser/cross platform compatible before you put it on display. You learn that from getting egg on your face and lack of experience…..Make sure you cover your ass first, just good basic advice whatever you do.

    # December 14, 2010 at 12:10 am

    yeah i sent him and his assistant the new fixed version and i apoligized for that. and RGBa. whole other story. looks BEAUTIFUL! not compatible with IE unless you have 9. so i use PNG now.

    http://attilahajzer.pcriot.com/sites/Sylus/

    # December 14, 2010 at 1:09 am

    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
    # December 14, 2010 at 6:11 am

    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 :)

    # December 14, 2010 at 7:13 am

    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.

    # December 14, 2010 at 10:26 am

    okay maybe im not as smart as i though haha. but thank you so much!

    # April 8, 2011 at 4:07 pm

    You can fix it by putting in your css:

    header{

    display:block;

    }

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".