Debugging CSS – The Plan of Attack

Debugging CSS – The Plan of Attack

Debugging CSS – The Plan of Attack

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.

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>
		<!--<div></div>
		<div></div>-->

		<div>
			<p>Possible Problem?</p>
		</div>

		<!--<div></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 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.

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>