What To Do When Things Don’t Work Like You Expect Follow

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:

http://pastie.org/2257109

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

Sometimes nothing jumps out as the source of the problem, or a browser window may crash or act strangely very quickly. In this case, less is more. If you’re having Javascript issues, try commenting out all references to Javascript. Do things work? Slowly add back in until you find out what the problem file is. Use extensions like Firefox’s Web Developer extension and the debug tools in Microsoft Internet Explorer 8 to help find where the problem lies.

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/ (external link) - or perhaps your application also has a CSS validator.

Once you get to the root of the problem, Google will be your best friend. There are thousands of pages discussing how to debug CSS and Javascript; sometimes a description of your error message or what’s happening will produce a lot of helpful results.

Have more questions? Submit a request and our team will be able to help get you sorted.
Powered by Zendesk