Inspecting elements and debugging CSS using Firebug

Prior to the advent of Firebug, debugging documents styled with complex CSS was an exercise in tedium. In this recipe, we will be demonstrating the use of Firebug in locating an errant margin that we are looking to modify.

The default setting for comment display in Drupal is to thread and nest them. In other words, replies to existing comments are added beneath them and indented by way of a margin to indicate each comment's specific level in the hierarchy. We are going to find out which CSS file, and the rule in particular, is responsible for this margin and modify it accordingly.

Getting ready

For the purposes of this recipe, the comment module will need to be enabled and some test content, which involves nested comments, will need to be generated using the Devel Generate module. It is assumed that the Firebug add-on has been installed in Firefox. The add-on can be downloaded from http://getfirebug.com.

How to do it...

Firstly, we will need...