3 Step Process for Troubleshooting Your CSS | Step 1

From pros to self-starters just about everyone has faced the trials and tribulations that come with CSS based layouts as some point.  Even as your skillset builds with experience from time to time you are still faced with the challenge of some random issue that usually rears it’s ugly head in that one browser (read: IE) and you find yourself needing to troubleshoot your code.  After all, it’s our job to make sure that our code works in every major browser.

Before I got into web work, I was a QA guy.  Troubleshooting bugs in MacBook Pros (Powerbooks back then) and Treo’s for a few years gave me a good understanding of some basic troubleshooting rules that translate well into any industry.  I’d like to walk through a few steps of how these rules can be applied to web development, specifically Front-End web development.

Getting Started

Let’s start with something we all can relate with: you find a layout bug in IE.  Under your breath (or at the top of your lungs) you say something about someone’s mother, yada yada yada, and you start editing your code.  I’ve been in the same situation, feverishly making changes to a stylesheet when I suddenly realize that while I may have fixed the initial problem, I seemingly have created three more… in a different browser.

In hindsight, what I should have done, and now do, is to duplicate my existing stylesheet, rename it debug.css and drop it into my code at the end of your stylesheet calls and comment out my production stylesheet.  Now as I make changes to my debug stylesheet to try to squash my issue, if I completely screw things up I can easily revert to my earlier working copy without losing any ground.

If you don’t already, think about setting up SVN for your projects as version control can also make life a beautiful as a box of chocolates.  Once you have your debug.css in place, it’s time to get dirty.

Step 1 - Isolate the Issue

In my time as a QA engineer whenever we discovered an issue the first objective was to isolate it.  Removal the non-offending variables allows the engineer to focus on the real issue at hand.  Troubleshooting your CSS is no different.  You will be more efficient (and more successful) if you can first isolate your issue and then move on from there.

Ok, easy enough.  If your issue is glaringly obvious, this can be a no brainer.  You know exactly which rule to work with in your CSS.  But what if it’s not as obvious?  You’re not sure where to even start to find your issue, let alone fix it.  There are a couple of approaches you can take to help flush out your issue and give you a starting point for your debugging.

First and foremost, it’s always good practice to validate your CSS.   The W3C offers online tools for you to validate your markup here.  Check your CSS first.  If your CSS is valid, then move along and validate your HTML make sure there are no conflicts there.  Although it isn’t always the case, sometimes, depending on what the validator finds, it could give you a good launching point as to the cause of the issue.

Now, chances are you’re already aware of which browser is causing your issue.  Use this knowledge to your advantage.  Specific browsers are known for having specific issues.  Knowledge in hand you can more easily isolate your issue and move along to resolving it.  Sometimes, however, your issue is seen in multiple browsers.  In that case, here are some ways I use to help me to isolate an issue.

Ways To Isolate An Issue

Since we’re talking about a layout bug, you can start by commenting out the code in your HTML, one div at a time, then refresh your browser to see the effect.  Or subsequently, you can comment out your CSS in a similar fashion and refresh to see the effect.  A good place to start is with floated or absolutely positioned elements, as both can get funky if you don’t fully understand how they behave, or how certain browsers handle them.

Don’t forget to look in areas that could have inherited rules that are misbehaving.  Remember, CSS stands for Cascading Style Sheets, the emphasis here being on the Cascading part.  While this can be time consuming, it is one effective way to isolate your issue.

Another method, and one that I prefer myself, is to add a unique background color to the elements on your page.  If you think of your elements like LEGO blocks stacking up or sitting side by side, giving them a background color helps you easily visualize how they are being positioned by the browser.

Most of the time, you will be able to see how one element is overlapping another, or how one is twice as wide as you had intended (<— thanks IE); something may standout when you can see the your elements as blocks.  Adding a unique background color to every element makes it easy to spot.

Ok, I’ve Found My Issue, What Next?

Once you’ve found your issue it’s time to move on to the “understanding” of why your issue is an issue (can I say issue anymore times in that sentence).  With a proper understanding of why it’s happening, it’s easier to resolve it, and more importantly easier to prevent it from happening again on your next project.  We’ll tackle Understanding Your Issue in Step 2 of Troubleshooting Your CSS.