I work hard to ensure my website designs are cross browser compatible.
My process is as follows:
- Sketch the rough layout idea in photoshop. or even on a piece of paper.
- Mock up a screen shot in photoshop (insert fav photoeditor here).
- Start building the site based on the above design.
- Decide which browsers are important to be compatible with.
- Test the site with each major design change with these browsers
- There are some CSS hacks which I've been forced to use inorder to get all of the target browsers working. I try to avoid stooping to these as they may have longer unexpected side effects with some future browser version.
- Last step is to review the final product in all of the test browsers. There will be minor differences, this is where you need to decide when to draw the line. Because a LOT of time can be easily spent pushing pixels.
Generally speaking I target the top 4 browsers: IE-7, IE-8, FF, Chrome & Safari. I recently used a CSS hack for fixing an issue with IE-7:
*width: 45px; /* IE-7 Hack */
This works by using a little bit of invalid CSS (*) the other browsers listed will correctly ignore this hack, but IE-7 reads it. As it is read last it is applied
hint: consider the actual browser market share. This may differ significantly with your actual visitors. Record which browsers are visiting your site at some future time and ensure you are covering at least the majority of the browser makes + versions