A great article on Browser compatibility issues by Chaitanya Goyal, Senior Software Engineer and eZdia’s very first employee.

As developers and designers all are facing many browsers issues while running website on different browsers. Most of these issues are with Internet Explorer rest browsers having better look n feel. If someone ask me to suggest which browser should be taken to authenticate uses worldwide then I must go with Mozilla ….. but as its not possible we must follow the browser compatibility.
Its gr8 to use Mozilla b’coz it gives developer toolbar called firebug which work very efficiently for finding any element of HTML Tag with applied class & style, I really appreciate and recommend every developer to use it.

Validate your code:

Run your HTML and CSS through validators before uploading your site. Valid code might not make your page magically work in all browsers, but invalid code can produce all sorts of unpredictable and hard-to-debug problems.

The W3C HTML Validator and CSS Validator are good places to start. You can also use browser plugins, such as the Html Validator Firefox add-on, to check pages automatically while you’re viewing them in the browser.

Use CSS reset rules:

You’ve probably lost count of the number of times you’ve had to add margin: 0; padding: 0; to a CSS rule to make it consistent across all browsers.

Make IE6 work with transparent PNGs:

PNGs are very big issue for IE6 b’coz it showing some background color if png image is transparent. Transparent PNG images are wonderful things — they let you have up to 256 levels of transparency in an image, which means you can do neat tricks like translucency and smooth borders on any type of background. However, Internet Explorer 6 doesn’t properly display transparent PNGs by default, instead displaying ugly boxes where the transparency should be.

Its good solution, with a bit of tweaking, you can get transparent PNGs to work perfectly in IE6, without having to make major changes to your markup or CSS. A good solution is IE PNG Fix from Angus Turnbull.

Code by hand:

My personal preference is to code all HTML, XHTML, and CSS by hand. That way I have full control over what I’m creating, and can easily fine-tune the code as necessary to work in a range of browsers.

If you find coding by hand tedious, there are many excellent text-based Web page editors out there to make your life easier. Take a look at CoffeeCup (Windows) or Coda (Mac).

Wrapping up:

Use wrapper class for as much as possible for code reusability.

Micosoft IE Tool:

Microsoft is now offering the Internet Explorer Developer Toolbar (beta) – Here is info on the toolbar from the Microsoft site:

Overview

The IE Developer Toolbar provides several features for deeply exploring and understanding Web pages.

1. Explore and modify the document object model (DOM) of a web page.
2. Locate and select specific elements on a web page through a variety of techniques.
3. Selectively disable Internet Explorer settings.
4. View HTML object class names, ID’s, and details such as link paths, tab index values, and access keys.
5. Outline tables, table cells, images, or selected tags.
6. Validate HTML, CSS, WAI, and RSS web feed links.
7. Display image dimensions, file sizes, path information, and alternate (ALT) text.
8. Immediately resize the browser window to 800×600 or a custom size.
9. Selectively clear the browser cache and saved cookies. Choose from all objects or those associated with a given domain.
10. Choose direct links to W3C specification references, the Internet Explorer team weblog (blog), and other resources.
11. Display a fully featured design ruler to help accurately align objects on your pages.