Cross Browser Compatibility, A rant, Some tips, Some thoughts.

If you're reading this posting, and you're using IE6. Please just stop. Do yourself, and every web developer a favor. Download a new browser, whether it be the most up to date Internet Explorer, Firefox or Chrome, just do it.

Since that is out of the way, lets discuss this. If you're a web developer, I am sure you have developed pages where you are given a design, you implement it, it looks great, everyone is happy, and then the 'Client's client' is un happy because your .png graphics are not working and the page looks a skew. Why? They're on IE6.

This has happened on more then one occasion where I work, and even if you know ahead of time, working cross browser, and with out-dated browsers can be a pain in but. However, I do have some tips and tricks for you which may make your life a little easier.

If the website is already built, and there are only a few things wrong, ex: pngs are not transparent, and the odd div is out of place, there are two quick and easy solutions.

Solution 1. Using a png fix. There are many png fixes available, and they can be a real life saver. They typically require you to have jQuery included, but if you're a web developer and dont know about jQuery perhaps you shouldn't be one.

Solution 2. CSS Hacks. Although I try not to endorse CSS Hacks, they can be a real life saver for saving time. Essentially, they allow you to target specific elements' attributes depending on the browser.
For example:
<style>
     p{
          color: #000000; /*Black Color Text All Browsers*/
          _color: #ff0000; /*Red Color Text in IE6*/
          *color: #00ff00; /*Green Color Text in IE7 and below */
           color:#0000ff\9; /*Blue Color Text in IE8 and blow*/
     }
</style>


/*IE = 8:*/           property: value\9;
/*IE = 7: */       *property: value;
/*IE6:*/            _property: value;

Alternatively, you can use if conditionals such as:

<!--[if IE]> CssCode for Internet Explorer <![endif]-->
<!--[if lte IE 6]> Code for IE6 and below <![endif]-->
<!--[if lte IE 7]> Code for IE7 and below <![endif]-->
<!--[if lte IE 8]> Code for IE8 and below <![endif]-->

Within the 'Code' Section you can include Stylesheets or use plain css. I personally prefer the first method as I find it less messy.

A more comprehensive guide can be found here, here or here.


The Best Method, however is to be using the right tools, to help find the problems and see what is going on. I strongly recommend any web developer worth their salt to use:

Firebug (can be used in most browsers, however it is certainly best used in Firefox)
IE Tester - Handy application to view your pages in various versions of IE. Of course there is no substitute for the real thing, but this will certainly help.