I’m refering to CSS hell. Actually, it’s not CSS that’s hell (although you need to get used to it), it’s the damn browsers that don’t render as they should! And on top of that, ASP.NET also does a good job at screwing up your user interface sometimes (with all the hidden (not always so hidden) divs it renders).

I’ve recently had to do some serious CSS-ing on a friend’s website, and I’ve had a rough time.

How I get it to look the same in all browsers

1) Start out with Firefox
If everything looks as it should in Firefox, you’re further than you’d think. Firefox is my default webbrowser, and it definitly should be yours to. Especially for web development.
2) Follow with IE7 and IE8
Probably, you’ll have to fix some issues, but they won’t keep you up during the night.
3) Finish off with IE6 hell
As a developer, you wouldn’t even think of it, but there are a loooooooot of people out there that are still using IE6. And I’m not talking only about people, but also about whole organizations. Depending on the target of your application, you can’t deny IE6.

How I structure my CSS

Generally speaking, I use several CSS files within a web application. I seperate the styles I use on my master page, from the styles I use on my pages, just to keep the CSS focussed.
Apart from that, I have a seperate CSS file that contains IE fixes (mostly for IE6) and I only include it if the client is running IE6:

<!–[if IE 6]>
   <link rel=”stylesheet” type=”text/css” href=”CSS/ie6Fix.css” media=”screen” />
<![endif]–>

Apart from that, I have this rule: Never put style tags in your pages.
Fix everything in your CSS file. Don’t mix them. You’ll avoid weirdo CSS bugs and a clean seperation of your HTML and your CSS .

How to test in different browsers?

I use Firefox, and IE7 on my computer. You could install IE6 using VirtualPC, but I prefer another way. I just came accross an interesting tool lately that allows you to test a web application in the most important IE versions. It’s called IETester. It’s freeware and it allows you to test in IE5.5, IE6, IE7 and IE8! It’s still an alpha release, but it sure made my job easier. To be completely sure, I always try to test the web app on a pc running IE6, just to make sure. If the application should contain a bug, that would mean you’ve got a CSS bug, and that one is your responsibility. No excuses.

Debugging tools (Updated 17/02/09)

Prajwal Tuladhar just reminded me in his comment that I didn’t mention the tools I use for CSS debugging.
Here they are:
- FireBug for Firefox
- Web developer toolbar for Firefox
- Internet explorer developer toolbar for IE7 and IE8