1. Don’t Panic!
We haven’t seen a problem that couldn’t be solved. Usually the problem is something minor and easily correctable. This document will show you some of the most common problems and where to look to start fixing it.
2. Use an up-to-date DOCTYPE
This is a standard practice and should be the first line of any of your HTML files. Many programs will automatically insert one for you, but if you’re developing HTML by hand, you may have neglected this extremely important step. Having a DOCTYPE declaration tells the browser what rules to use when showing a page. It’s a small detail that makes a huge difference – and it usually goes a long way to cleaning up some of the discrepancies that may otherwise exist between Internet Explorer and other browsers. One of the most frequently used DOCTYPEs is the XHTML 1.0 Transitional DOCTYPE, which looks like this:
Place that line as the VERY FIRST line of your HTML file.
3. Make sure your markup is valid
This is the second step to making sure things work. What this means is that, according to the DOCTYPE you specified in the previous step, your document is playing by the rules for that DOCTYPE. The best way to validate your code is to use an automated service. Look for something in your editor (it exists in programs like Dreamweaver, Textmate, and BBBEdit) that has a name like “W3C Validation”.
This step is critical to fixing problems – you’ll see errors and warnings; fix all errors (your document is invalid) and try to address as many of the warnings as possible. Doing this gives you a good place to start actually debugging, and in some cases, it may solve your problem.
4. Determine if the problem is in one browser or all browsers
You should be checking your page in all browsers during the building process. For sanity, speed and simplicity, we recommend that you perform initial debugging in Firefox; usually this will get you 80% of the way to completion in other browsers.
If you’re developing on a Mac, you need to use a program like Parallels or VMWare Fusion so you can run Windows and see your page in Internet Explorer. This is extremely important – the majority of your views will likely come from PCs; the most problematic browser in terms of development tends to be Internet Explorer.
At a minimum you should always check your site in Internet Explorer 7 and 8; Firefox 3, and the most current version of Safari. Working cleanly in these browsers means you’ll get a lot of other browsers (Opera, Chrome) working as well without specifically addressing them. Looking in Internet Explorer 6, while unpleasant, is a worthwhile exercise.
Doing this check also will help you understand if your problem lies in one browser, or if it’s an across the board problem.
5. If you can’t solve the problem, try simplifying
If the problem lies in CSS (you can’t click on something, positions/proportions are weird), try the same trick. If you identify a problem CSS file, you may want to try further commenting out sections of the file to narrow down where the problem lies. You can also validate your stylesheet at sites like http://jigsaw.w3.org/css-validator/ - or perhaps your application also has a CSS validator.