September 15, 2010
There’s no doubt about it, CSS is your friend
However every web designer know’s CSS can also be a bit of a nightmare to debug. Here’s how I go about debugging CSS.
#1) Turn boarders on. border: 1px solid red; or border: 1px dotted red;
Either way you slice it a boarder can be your best friend. Border’s help you see where your elements are on a page. If they are positioned wrong a boarder can determine this.
#2) Use Web Developer toolbar. This could be number one, but I usually start with turning on boarders and am able to figure out whats wrong. When that fails I use Web Developer tool Bar, CSS, View Style Information. This helps me outline and see where elements are sitting. It also gives me the names and styling of each element. From the image below I can tell the high-lighted area is part of p, li, feedback class.
Web Developer tool bar has a lot more great features for debugging code. If your not using this toolbar or firebug, you should re-think the tools you use.
#3) Use Firebug. If you can’t find what you need with Web Developer toolbar, which I usually do, I use firebug. Firebug allows for local document editing which can be handy for debugging. The nice thing about firebug is you just have to hover over a css element and it show’s you where your element is by outlining it.
#4) Validate your CSS & HTML. Validating is a great way to debug. Once your code is valid it should appear properly. Don’t be afraid to get down and dirty. Remember the cleaner the code, the happier search engines are. If you run into problems with certain browsers like IE. Validation can help you find new ways of building your CSS so it is cross-browser friendly.