Lesson: Debugging layouts with the DOM-inspector

One of the tools I find very useful when something does not look like I want it to look like, is the DOM-inspector that ships with Firefox (don’t get scared now! works for layout problems in IE too). You just need to make sure you checked it when installing Firefox (in custom installation mode, but we always do that, right?)

At the page that does not look like it should, start the DOM-inspector (from the ‘tools’ menu, or Control-Shift-I), and find a way to have both the DOM-inspector and the window you want to debug in one screen.

On the top-left, next to the search binoculars, there is a circle with an arrow; click it. Now click on the object that does not look right.

A red blinking box marks the innermost box you clicked on. Maybe you can already see that this box has the wrong shape, size, height, etc. The DOM-inspector now shows you the structure of the document with all divs, classes and id’s of the elements. This should make it easy for you to find the element in your css file.

If you still have no clue what is wrong, the right pane shows you the details of this element. On the top-left of the right-pane the button reveals a pull-down menu, in which you can select the various items to inspect.

From this pull-down menu, the CSS style rules show all rules that eventually determined your layout, making it easy to pinpoint how the layout went wrong.