Menu
I'm (obviously) new to web development, and I'm just now realizing that my sites are pretty screwed up in some IE versions, but how do I fix them? How do I know what to change in the CSS and where, when multiple layers and divs aren't displaying properly?
Example: http://www.jwstudio.us/bkpa
Is there a resources for IE CSS fixes/compatibility? What about for the positioning and color differences between Safari/Apple and Windows browsers?
974
asked May 31 '26 23:05
Few tips:
Read http://quirksmode.org/ – loads of useful info on there.
Don't worry about things looking exactly the same, IE 6,7 and 8 are pretty out of date, and there are very real bugs in the way they render pages. Your code can be correct, and still look wrong in IE.
Instead of writing <body>, write:
<!--[if lt IE 7 ]> <body class="ie6"> <![endif]-->
<!--[if IE 7 ]> <body class="ie7"> <![endif]-->
<!--[if IE 8 ]> <body class="ie8"> <![endif]-->
<!--[if IE 9 ]> <body class="ie9"> <![endif]-->
<!--[if gt IE 9]> <body> <![endif]-->
<!--[if !IE]><!--> <body> <!--<![endif]-->
Then, in your CSS you can write things like:
.someclass {
loads of normal CSS
}
.ie6 .someclass {
position:relative;
top:-20px;
}
If you wanted to move something up 20px, but only in IE6. This helps you target old browsers with minimal hassle, and without worrying that you are screwing things up in other places!
Use scripts like ie9.js to upgrade older IE to use many features from later IEs, as well as fixing some of the stupider bugs. CSSPie is another useful tool for getting border-radius, box-shadow and gradients to work in these ancient browsers!
Color differences will likely be because your images include a color profile, use something like imageoptim (OSX) to strip out extraneous info such as this before putting online, or save them for Web from Photoshop.
Hope that's useful!
197
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
