Tips on Debugging Layouts

  1. The first step in debugging should always be making sure that your code is valid. In other words, make sure your [X]HTML and CSS code don't have any errors that might be causing the problem. (Be aware that the validators don't detect all errors that can cause problems, but they are still useful tools.)
  2. Put contrasting background colors on elements to see where they are. Some people recommend the use of borders for this same purpose, but since borders affect the total width an element takes up, I recommend using background colors instead. The outline property could also be used, however, IE versions before 8 (excluding the very old IE5 for MacOS) don't support it.
  3. Use Firefox's Firebug extension and/or DOM Inspector extension and IE/Win's DOM Explorer, which is part of IE5-7/Win's Developer Toolbar (IE8+ have developer tools built-in), to see where elements are and to check the CSS properties being applied to each element. Additionally, Safari 3+ has Web Inspector, a similar tool, built in. You can enable it by going to Edit ==> Preferences ==> Advanced ==> Show Develop Menu. Opera also has had some tools available for 9.0+ and now has Dragonfly available in Opera 9.5+.
  4. Use Firefox's Web Developer Extension. One of its features that I find most useful is that it allows you to edit the live stylesheets being applied to a page.
  5. Learn to recognize IE's rendering bugs, including how it treats floats and margins differently from other browsers.
  6. Learn what hasLayout is and how it affects things in IE5-7/Win. (I discourage the use of the underscore hack, which the second one recommends.)

Related Links:

IE Bugs

Other Lists of Browser Bugs

Last update: 2013-03-06