There are many different ways to go about writing your CSS code and at times it’s quite amusing to watch the firefights over who’s approach is THE approach. Like with Rome, there are many ways and different ones that lead to success and at this point I have come to a workflow which has proven to be the most uncomplicated and smoothest approach for myself:
First, design the site for Firefox – this is, if you need to pay attention to the PC world, what still is the case for most businesses – do the layout and build your CSS. Once it works in Firefox, check it out in IE7 on XP and adjust as needed to fix the glitches you will find. Then, face the beast and fire-up IE6 and workout it’s kinks. Last, but not least, take a look how the site looks in Safari on the Mac and adjust as needed.
When it comes to CSS code writing I use the same approach. My ‘normal’ ID’s and classes will not contain hacks and I also do not use a conditional line in the HTML header to address browser specific problems.
To fix and hack away I use the following format:
/* the following is the non-modified styling code */
/* this group is for all the browser specific hacks as needed */
height: 152px; /* Safari */
*height: 155px; /* IE7 */
_height: 145px; /* IE6 */
And this is all that is to it.
I do take into account that the “html*” hack gives browsers a bit of a hiccup, but in the end it keeps all the ‘special rules and hacks’ clean into their own little groups and easy to track down.
And, to make the road even smoother, do the Firefox-IE-Safari circle over and over again and move through all the browsers after each step (basic layout, section completion, further fine tuning), this will prevent a lot of time consuming debugging later on which you undoubtedly will encounter if you first build the site completely in one browser and only then go checking how it looks in the other ones.