Troubleshoot CSS with Firebug

There are times when you may want to troubleshoot your CSS settings. You can easily diagnose problems and test solutions using the Firebug add-on for the Firefox browser.

If you have not downloaded and installed Firebug, you may do so here: https://addons.mozilla.org/en-US/firefox/addon/1843

1. Once you've installed Firebug, execute the program by opening the Tools menu and selecting Firebug (or you can simply press F12).
   
   There are many wonderful options and tools in the Firebug add-on. However, we will be looking at only the most common tools.
2. First, click on the Inspect Element icon. This will enable you to hover your mouse over any HTML element and see the corresponding CSS properties.
3. Elements with the mouse's focus will be shown with a border around the element.
   
   In addition, the Firebug windows show the corresponding CSS information.
4. Clicking on the element will "lock" the element in Firebug so you can test various settings.
   
   In this case, notice that the css properties for "#sitename h1 a" have been struck out. This indicates that although the property is defined in the css stylesheet, it has been overriden elsewhere.
   
   The overriding element/property is displayed above the stikeout in the right pane. Here, the "element.style" is overriding the stylesheet.
5. In the highlighted element in the left pane, note that the "a style" is defined there. This generated in-line style is overriding the stylesheet.
6. You can temporarily change, add, disable, or delete css properties using Firebug to test various settings. In this case, we'll change the "sitename" text-decoration property.
7. You will see the results of your css property changes immediately.
   
   Note: If we had tried to make these changes on the struckout "sitename h1 a" there would have been no change to the display, since the "element.style" would override the change. Firebug will only show changes that are consistent with actual results.
8. You can add properties using Firebug to test results as well.
   
   Hover your mouse over the element where you want to add a property and right click. Select New Property.
9. Add the property and value to the element. The results will be shown immediately.
10. Notice this time, we added the property to the "sitename h1 a" element. Again, if the value had been overriden elsewhere, the results would not be displayed on your screen.
11. Next, let's troubleshoot an issue.
12. Notice that the Sitename has appeared on the right side of the page beneath the Search Box.
13. Begin by ensuring the Inspect tool is selected and then hovering your mouse over the offending HTML element and selecting that element.
14. Notice that the link has been highlighed in Firebug's left pane. However, element placement issues are generally related to div or span tags. The left pane indicates that the link tag is nested within the div#sitename tags.
15. Click on the div tag to view its properties.
16. In the right pane, Firebug indicates that the stylesheet (styles.css - line 173) shows that the div#sitename has been set to float: right.
17. First test the element by changing the float value to left.
18. Although that's better, notice the float value has misplaced the siteslogan.
19. If you think a particular property is causing issues, you can use Firebug to disable the property. We'll reset the float value to "right" and then click on the Disable icon to view the results.
20. Notice that the sitename is back where it belongs and is behaving appropriately.
21. This indicates that the div tag's default placement (float: block) is the value you'll want to set.
22. There is no need to include default properties and values to HTML elements (unless they're being overridden elsewhere). However, we'll change the float property to it's default value.
23. Notice that the default property and value are not maintained, since they are presumed.
24. When you have finished troubleshooting and know what changes are needed, you will need to open the corresponding stylesheet and make the changes there. Firebug only makes changes in your browser for testing purposes. Permanent channges must be made in the specified stylesheet.
25. To find the file location of your stylesheet, hover over the stylesheet link (in this case, styles.css). This will display the full URL of the stylesheet that you'll need to edit.
26. In TYPO3,  stylesheet files are generally available in the  fileadmin/tv-templates directory and are accessible using the Filelist tool.