Web design would be a picnic in a park on a nice day if not for the wonderment of Microsoft’s Internet Explorer.

It makes things interesting for sure.

Now, I’m of the opinion that writing a specific CSS for each different browser type (IE, Mozilla, Safari, everything else) is really time-intensive.

Call me lazy, but I’d rather create one CSS which will work for all. And with as few IE-specific hacks (ie comments with different behaviours attached) as possible.

However, when you’ve got a specific problem, which just won’t go away, you have to go back to tesing 101 and first principles. By the way this is by no-means a complete list, and is more a braindump for my future reference. If anyone else finds it useful, let me know though!

step 1: reproduce the problem somewhere else.

This means you can identify exactly what the problem is.

note: this may take a lot of time and effort. I find that it’s sometimes helpful to know foreign languages and the specific profanities of said languages during this stage. No punching the monitor!

step 2: Simplify the code (links into step one)

The idea here is to simplify the code. I’ve found that removing classes and things like that is far easier than mucking around too much. IE is a simple beast and likes a less complicated world. In fairness, less complicated wins.

For instance, try to use standard font styles (H1, H2, P, etc).

Furthermore, check spellings, semicolons and all the tags are in the right places.

step 3: use a validator (eg validator w3.org)

This will find all sorts of odds and ends. Fix what you can. Really.

step4: don’t make changes to a live site: always test beforehand.

A no-brainer perhaps, but it’s nice to note. I use a system of numbered folders for each different version of a site. I should really get something a little more elegant, a proper version control system, but this works for now.

I’ll add more later. Just got a site working and moving onto the flash banner. w00t!