Debugging and Validation

Debugging a website is part of the design process, made more difficult largely because of IE, particulalry IE6. A few methods around the most common problem will be in the debugging IE section. The W3school maintains statistics about what browsers in use today. However, making the determinitation about what browsers you will support based on several factors:

  1. target user (some or all) browser statistics
    1. most IE users don't use it by choice - it is a corporate IT standard
  2. your corporate policy on what browsers will be supported
    1. budget
  3. technical ability of designer/developer team or individual

Validation

You can validate inside dreamweaver (file>validate>markup) or online at http://validator.w3.org/.

Both methods will return any errors, the file of the error, the line of the error, and a decent description of both problem and likely solution.

Common Debugging Practices

When debugging make sure to check for the obvious. This is a reasonable order to check you code.

  1. is property supported by browser (if it works in one browser but not another)
  2. CSS typing errors
  3. property is actually unavailable (terminology sections lists properties)
  4. {} make sure curly braces are closed
  5. <> make sure your HTML container tags are closed
  6. element has conflicting overiding and inheritance issue
  7. validate your code http://jigsaw/W3.org/css-validator

Top IE Bugs

(Problem, and suggested links to solutions)

  1. Centering a layout solution: net.tutsplus.com
  2. Staircase / stepdown effect solution: net.tutsplus.com, css-tricks
  3. Double Margin on Floated Elements solution: net.tutsplus.com, css-tricksposition everything
  4. Inability to Have Elements with Small Heights solution: net.tutsplus.com
  5. Auto Overflow and Relatively Positioned Items solution: net.tutsplus.com
  6. Fixing the Broken Box Model solution: net.tutsplus.com, css-tricks
  7. Setting a Minimum Width and Height solution: net.tutsplus.com, css-tricks
  8. Floated Layout Misbehaving solution: net.tutsplus.com
  9. Space Between List Items solution: net.tutsplus.com
  10. Transparent png has gray background solution: net.tutsplus.com
  11. No Hover States css-tricks
  12. 3 pixel text jog position everything

Online Solutions