CSS Troubleshooting

Many people asked me about CSS troubleshooting / debugging. This article is specifically written for those who are coding using DIV approach but facing issues and they don't know how to trouble shoot the issues.

1. The first and simplistic method is using Adobe Dreamweaver CSS Panel. Just click on your HTML code and you will able to find all selectors and their values in CSS Panel. You can find CSS Panel from Menu Bar > windows > CSS Style (Shift + F11).
   
   
2. Second Method is also a simple one, Use multi level selectors for defining outlines by uncommeting following code one by one/* * { outline: 2px dotted red }
   
   /* * { outline: 1px solid red }*/
   /* * * { outline: 2px dotted green }*/
   /* * * * { outline: 2px dotted orange }*/
   /* * * * * { outline: 2px dotted blue }*/
   /* * * * * * { outline: 1px solid red }*/
   /* * * * * * * { outline: 1px solid green }*/
   /* * * * * * * * { outline: 1px solid orange }*/
   /* * * * * * * * * { outline: 1px solid blue }*/
   
   
3. Third Method is commonly used by web designers and developers. "Firefox Addon - Web Developer Toolkit" You can download it by following the link above . You can troubleshoot your CSS by enable / disable CSS OR Apply Border Function.
   
   
4. The most widely and my favorite one "Firefox Addon - Firebug", You can download it by following the link above OR visit its official website to explore what can you do with firebug http://getfirebug.com/. You can check any website presentation, user behaviour code , edit it and can even duplicate it with the help of this tool. Firefox also have a Lite version for other browsers such as I.E, Opera and Safari e.t.c you can download it from http://getfirebug.com/lite.html