DAN STORM

skip to main content skip to secondary navigation

CSS Tutorial

Appendix 1: Troubleshooting Techniques

When your HTML and CSS are not doing what you intended, it's time to practice a few troubleshooting techniques. First, validate your HTML. The W3C has a free validation tool. You can provide a URL, upload a file, or paste code directly into the page.

Unless you are supporting old browsers, you should be using transitional or strict XHTML 1.0. You will then need to use the appropriate doctype. If you do not use a doctype, browsers will default to "quirks" mode, which is a loose way of displaying the code. Chances are that if the page breaks using an XHTML doctype, then the fault lies in your coding. Incidentally, do not even place comments before the doctype. IE will display in quirks mode despite the doctype. Malformed and/or illegal HTML, such as a DIV element within a P element, might cause the CSS not to be applied as expected. So first ensure that your markup is valid. Assuming your HTML is fine, what do you do to track down a CSS problem?

  1. Validate your CSS at the W3C. You can set which version of CSS you are coding to.
  2. Comment out all references to external (linked or imported) CSS. This way you just look at the XHTML display. This will help you determine whether the problem is CSS or XHTML. Then one-by-one reference the style sheets again. Optionally, you can have Firefox ignore your style sheets by selecting the "View" menu, "Page Style", "No Style".
  3. Comment out sections of each CSS file, a bit at a time, to track down the problem. It may be that some value was not inherited or overridden as you had intended.
  4. Add a diagnostic outline to elements in the CSS or inline, e. g. style="outline: 1px solid red". This red bounding box will help you see the layout of an element. Note: IE6 does not support the outline property. For troubleshooting IE use the border property which unfortunately increases the box content container a little. Or you can add different background colors.
  5. Use the before or after pseudo-element to place an image or some hard-to-miss text before or after elements or attributes you want to track. For instance, you may want to enforce zero tolerance for inline styles. Or you may want to track class use to minimize their number. *[style]::before {content: "Hey, pal, you wanna strip this inline style out?"; font-size: 20px !important; color: red !important;} *[class]::before {content: "Class Call!"; font-size: 20px !important; color: red !important;}
  6. Just can't wean yourself off layout tables? If you are using tables for layout you could do the following to check how they are formatting. table {border: 1px solid red;}
  7. And speaking of tables, you can diagnose for "nowrap". Perhaps too much unwrapped content is breaking your pages. td[nowrap], th[nowrap], td[nowrap="nowrap"], th[nowrap="nowrap"] {background: red;} Put all of these diagnostics at the bottom your main CSS (for greater specificity), and comment them for later removal.
  8. You can check to make sure there are no placeholder anchor tags or images without an alt attribute by surrounding them with a red outline. a[href="#"] {outline: 1px solid red;} img:not([alt]) {outline: 1px solid red;}
  9. Perhaps best of all, use the Firebug and Web Developer Firefox add-ons. They are indispensible, and may make all the other hints on this page unnecessary.