The Earth-Toned Pill

I've been doing a metric ton of web design lately, and I am quickly approaching a point where I am officially a seasoned XHTML/CSS designer. The only monkey wrench I find in my quest for web design perfection is the pain-in-the-ass issue of cross browser support for CSS standards.

For those not familliar with what this means, when I design a website, I use cascading style sheets to do nearly all of my webpage layout, formatting and styling work behind the scenes. This allows me to use one or several style sheets that instruct the browser on how to render page elements while the actual HTML code on the page itself remains light and easy to read and/or modify.

But the problem is that not all web browsers implement CSS fully or in a standardized way. Simply put, all browsers display web pages differently where CSS is involved. Although browser engines largely fall into either the IE or Firefox camp (in terms of page rendering), I find myself writing validated CSS and XHTML code that works fine in IE6 or 7, but displays totally broken in Firefox, Opera, etc. Part of the problem for me up to now has been the necessity of having 4+ browsers installed just to do testing on a site. Today though I found browsershots.org, where you can get screenshots of how your page displays in 30+ different browsers!

But while this is a great tool for 'troubleshooting', I'm still struggling with how to actually work with or around the issue. Do you design for IE and say 'oh well' to other browser users? Not likely, but you can't exactly do the reverse either. I guess for me its going to mean more research and carpal tunnel syndrome before I make any real progress...

Anyone out there have some advice?