So i have been updating my websites with some of those new HTML 5 codes like
<header></header> <nav></nav> <footer></footer>
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
<header><div id="header"></div></header>
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 :
<header id="header">THIS IS THE HEADER</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 ?
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.
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.
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 :)
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.
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
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 ?
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.
http://attilahajzer.pcriot.com/sites/Sylus/
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 :).
Firefox will also treat them as inline by default and so break your display :)
header{
display:block;
}