Some Help With IE Bugs

It’s frustrating to code a page that looks great in Firefox, Chrome, Opera, and Safari, but has odd quirks in Internet Explorer. IE versions 7 and up have done much to fix these compatibility issues, but bugs still remain. And, while many users have upgraded to newer browsers, a significant portion of total webusers still use IE 6 and earlier.

So what’s a coder to do?

I’ve put together a small, but by no means comprehensive, list of resources and fixes for the most notorious IE bugs:

First, Figure Out What Needs Fixed: enter your url on this site and render it in different versions of IE to get an idea what you might need to fix http://ipinfo.info/netrenderer/

IE Conditional Comments: an essential tool in your arsenal. These comment statements can tell a page to load differently when IE is detected, or even different versions of IE. http://www.elated.com/articles/internet-explorer-conditional-comments/ 

Fix the Big Problems: fix the big IE6 issues http://www.dave-woods.co.uk/?p=143

Fix IE Non-Centering Div: no-nonsense fix for IE’s non-centering bug http://flumpcakes.co.uk/css/center-div-ie

Fix IE Rollover Flicker: as simple as adding a background image http://www.ibloomstudios.com/articles/css_rollover_flicker_in_internet_explorer/ 

Fix IE Z-Index Bug: for when you stack your items but they reshuffle themselves in IE http://thatnorwegianguy.wordpress.com/2007/11/29/positioning-and-z-index-in-ie/ AND http://csscreator.com/blog/z-index

Fix PNG Image Rendering in IE6 and below: several different approaches http://www.twinhelix.com/css/iepngfix/ AND http://www.bloggerbuster.com/2008/04/fixing-png-image-transparency-in-ie6.html AND http://blog.veanndesign.com/2008/03/09/ie6-and-transparent-pngs/

Get CSS Transparency to Work on All Browsers: not really a fix, per se, but a preventitive solution http://css-tricks.com/css-transparency-settings-for-all-broswers/

While these may not solve every problem, you should now be well on your way to having a well-degrading, bug-free, cross-browser website!