1. Technology

Web Design Troubleshooting Checklist

Debug Your CSS and HTML Problems Step-by-Step

By

I get asked all the time how to fix various problems in Web designs. The challenge is that while there is usually only one way to get your design right, there are hundreds or thousands of ways to get it wrong. Problems can be as simple as not uploading a file or as complex as having the CSS cascade cause unexpected conflicts. But finding the problem can be frustrating.

By being methodical in your approach to problems, you can do two things:

  • Remove the aspects that are working
  • Narrow down your focus to just the areas that are not working

It can be tempting to ignore some of the steps, especially the first few steps. But you'd be surprised how many problems are caused because a class name was misspelled or a file wasn't uploaded. When you're havig problems, I recommend going through all the steps on this checklist, even if you know that a step is correct. By verifying, you remove that as a possible error, and don't get caught up in a long testing process only to discover that the style sheet didn't get uploaded.

Web Design Checklist

□ Are all related files uploaded?
Paste the URL of all relevant files into your browser, and make sure they don't get 404 errors. This includes:

  • The HTML
  • The CSS
  • The Images
  • External JavaScripts
  • Other external files, like multimedia

□ Are you using the correct URLs for the files?
If your Web page itself isn't coming up, and you know you've uploaded it, go back to your hosting provider and make sure that you have the correct URL.

For files linked to within the HTML, make sure you have referenced the exact URL you browsed to in the first step. The easiest way to do this is to copy the working URL from your browser window and paste that into your HTML.

□ Does your HTML validate?
Using an HTML validator can often solve many problems. It's not that it's vital to have valid HTML, but that if your HTML is valid, you know that that isn't causing the problem. If you don't know how to use an HTML validator, I have an article that can help: Common Validation Problems and How to Fix Them.

□ Does your CSS validate?
Just like validating your HTML can help solve problems, validating your CSS can eliminate that as the cause of your problem.

□ Is your page cached?
Web caches can cause a lot of heartache. You edit your page, upload it, and your changes don't display. The easiest way to clear the cache for specific pages is to hold down the shift key while you click on the "refresh" button in your browser. Most browsers will go back to the server and reload the page when you do this.

□ Are you editing the correct page or CSS file?
This may seem like an obvious question, but when file names are the same (such as index.html) and the files are just stored in separate directories, it can be very easy to edit one file, and even upload it, and then test on a different page. One way I will test this is to add a simple comment with my name in it into the code. If I'm editing the wrong file, my comment won't be in the code after I upload.

□ Did you remember that CSS and most Web servers are case-sensitive?
What this means is that if you name a CSS class "JennsClass" and then define it as "jennsclass" in your CSS, it won't display on your Web pages. The same is true for most filenames on Web servers. If you are building your website on a Windows machine and then uploading the pages to a Unix or Linux server, you should look carefully at the filenames on the server side. If you used any capital letters in the filenames (for images, CSS files, linked HTML pages, or any other external document), they won't work if your HTML references them in lowercase.

Note: you should have caught any incorrect file names in the first couple of steps on this checklist, but it never hurts to check again.

□ Did you use the right DOCTYPE or include one at all?
Many modern browsers have what they call quirks mode, this is a mode that the browser enters when an HTML document doesn't have a DOCTYPE. Quirks mode is, well, quirky. And it's better that you use a legitimate DOCTYPE than leaving it off - especially if most of your customers view your site on IE.

□ Did you check your page in multiple Web browsers?
It can be tempting to build your page and either only check it in your favorite browser, or even worse, only in your WYSIWYG editor. Since WYSIWYG isn't really, you can create a great page in your editor and then be sorely disappointed when you look at it in Web browsers.

©2014 About.com. All rights reserved.