Debugging CSS – The Plan of Attack
Tags: Beginner
The day and age where we layout site’s in tables are now a thing of the past. As modern web designers, we have all adapted to W3C standards writing proper XHTML, CSS, and tableless layouts. But what we still face everyday are CSS bugs and quirks, and we must avoid falling back on the “easy way out” of using CSS hacks.
Before we get started, let’s make sure you have some essential Firefox & IE add-ons and tools in your arsenal.
- Firebug – Firefox Add-on
- Web Developer – Firefox Add-on
- Html Validator– Firefox Add-on
- DebugBar – IE Add-on
- Web Inspector- Safari Add-on
- Xray
The Plan of Attack
Here are a few different ways I approach narrowing down the culprit when it comes to CSS bugs and cross-browser issues.
Add Color
When ever I face a CSS bug whether it’s an alignment problem or something just not looking properly, I start out by adding a colored border or background color to the suspected class or ID property. By adding a colored border, you are able to see a clear outline of how your element is behaving.
.classname {
float: left;
width: 170px;
clear: both;
margin: 0;
padding: 0;
border: 1px solid red; /*--Add border to see the outline--*/
background: blue; /*--Add background to check how the content is behaving--*/
}
Process of Elimination
Another approach I take is commenting out different sections of the HTML to be able to evaluate if another class or ID is affecting the problem element. Sometimes people face CSS issues because of conflicting elements getting in the way. By this process of elimination, you are clearly able to pinpoint which element is the culprit.
<body> <div class="container"> <!--<div class="header"></div> <div class="leftnav"></div>--> <div class="content"> <p>Possible Problem?</p> </div> <!--<div class="footer"></div>--> </div> </body>
CSS Specificity
If you are not familiar with what CSS specificity is, check out Smashing Magazine’s Article regarding this topic. They break it down very well.
Using Style Sheet
Sometimes all of the classes and ID have the right properties, but there may be a conflict with two or more classes pointing to the same element. To test if this is the case for you, I usually start by making my suspected class or ID more specific.
.classname {
border: 1px solid red;
}
#container .classname /*--This class is being more specific, so it will take precedence--*/ {
border: 1px solid red;
}
Inline Styles
If you are having some nasty nested classes, and you feel this may be the cause of your bug, it may be easier to write some inline styles to pinpoint your issue. Of course, when you’re done testing, always take the inline styles out, and add them back to your style sheet.
<div class="classname" style="border: 1px solid red;">Problem might be here. Adding inline styles will reassure you that no other classes will be conflicting with it.</div>
Conclusion
These are just some approaches I take when facing CSS bugs, but the approach may vary in each scenario. When you have a set of specific debugging methods, it makes your workflow much smoother and allows you to pinpoint the problem and eliminate it much quicker. As I stated in my “Cross Browser CSS Fixes, Tools, and Hacks” article, I would like to discourage using unnecessary hacks and “work arounds”, and always try to re-work your code the proper way.
Related Posts
Author Bio
My name is Soh Tanaka and I am a Los Angeles based designer/front-end developer specializing in CSS driven web design with an emphasis on usability and search engine optimization. I also run a CSS Gallery which is updated daily with the best CSS websites from around the world. Come check it out!
You can learn more about me or 
Follow me on twitter for more updates and resources!
Did You Enjoy This Post?
Subscribe via RSS or by email to get all upcoming tutorials and articles delivered straight to you.
+ Add Comment4 Peeps Have Spoken Their Minds...
Great point about adding borders and colors to the problematic elements. Nice article & resource :-D
Good concepts!
I will say one thing about debugging. If you are working to try and debug horizontal or vertical spacing, say for instance you are floating something that’s fit nice and snug next to another floated object, and style that object with a 1px border its going to be 2 pixels too large to fit up there.
I generally change background colors for debugging. Granted, you can’t always see the background color change if its covered with divs or other objects, but its a lighter, more non-intrusive way to see what’s going on.
Thank you 4 every article, very nice blog =)! Just to say that, keep up the good work m8!
Just wanted to add, that I changed recently from using borders to using the “outline” attribute, it works the same way as border (incl. shorthand –> outline: 1px solid black;) but doesn’t add to the box model, means it overlays the let’s say div and doesn’t add a 1px line on every side…one problem you will have: outline is supported poorly by browsers…you would have to use opera (Portable Version here: http://www.opera-usb.com/index.htm) or I think Safari does the job too…but basically I like the outlining-elements-idea very much and I use it every singel time I design a site!
Speak Your Mind...