Strategy to start supporting other browsers

Question

We have a web application that only supports IE6 and above. It is an old application and majority of the user base was using IE. At the time of development no one paid attention to cross-browser support. If you open the site in Firefox, the UI is all skewed. We are planning to start supporting Firefox now.
What is the strategy we should follow to accomplish the task? What are the things we should keep in mind so that in future we can support any other browser with little effort?

Answer 1

Have a look at

• Cross-Browser Issues
• Browser Detection and Cross Browser Support

Answer 2

• If you possibly can, ditch support for IE 6. It is insecure (bad for your users) and non-standard (bad for your sanity). If you cannot ditch it, make it a secondary platform with a caveat like "for best results use browsers X, Y or Z".

• Stick to the W3C standard, and definitely avoid using any IE-specific extensions. If possible, use the W3C compliance checking tools to find / fix non-standards-compliant HTML, etc.

• Where possible, embed the browser specific tweaks that you need to make things look right in a browser specific CSS files.

• Use a framework like jquery to avoid cross-browser issues with your javascript.

• Test, test, test.

Answer 3

Start with a default css reset stylesheet that explicitly lists the IE6 styles. That way, the page will look the same in IE6 as it does now, and give you a baseline to work with in Firefox. From there, you can either rework the default styles to make then work in both, or add conditional FF-only styles (less desirable). Heres a link to default styles for various browsers (including IE6).

http://css-class.com/test/css/defaults/UA-style-sheet-defaults.htm