3 Step Process for Troubleshooting Your CSS | Step 2

In the first post of this trifecta, I talked about isolating your issue in order to better troubleshoot it.  There are several ways to do this, and one that I forgot to mention but is incredibly useful is Firebug.  Firebug is a plugin for Firefox that is invaluable when troubleshooting code.  Since it is only specific to Firefox it may only come in handy when your issue isn’t isolated to one browser.  Nevertheless, if you don’t use Firebug, I highly recommend it.

Step 2 - Understanding Your Issue

Once you’ve isolated your issue, but before you jump in and try to resolve it, you should take some time to understand it.  If you hastily move on to a solution, you may pass up a valuable lesson.  Browsers are fickle little futons.  Learning the in’s and out’s of how they interpret your code only makes you more skilled in your position.  Speaking of position…

My guess is one of the most common CSS related issues is the layout and positioning of elements.  If you want to get better at CSS based layouts, a smart move would be to understand how differently positioned elements relate with one another.  If you like to read specs, you can read all about positioning at the W3C web site.  The W3C is a great resource for general knowledge and a must read if you are in a web related career. But what if you’re up to par on the spec?  If you are dealing with a browser issue, there are several resources available online that document these problems well.  The most popular being Position Is Everything.  Position Is Everything along with many other sites do a great job of explaining why your particular issue is occuring, and steps you can take to resolve it.

Positioning Redux

Since our imaginary issue has been a layout bug, here is a brief recap on positioning.  There are 5 ways to position an element: static, relative, float, absolute and fixed.  Static positioning is the default position for DIV’s if you don’t declare any position on them in your CSS.  Static and Relative pretty much behave the same way in regards to the flow of the document; they stack on top of each other  (think LEGO blocks) in the order they are arranged in the HTML.  This is the most reliable way to layout a page.  There aren’t really any browser issues with static/relative-ly positioned DIV’s.

Floated DIV’s will allow a block level element to sit side by side with another block level element, or one DIV next to another.  In regards to the flow of the document, they are removed from the flow, still interact with other elements, and, unlike absolute positioning, can be brought back into the flow with a clear: rule.  Floats are usually where the chaos begins for a new-to-css-developer.

Absolutely positioned DIV’s will sit anywhere you tell them to; they’re the well behaved child that just sits there, quietly.  In regards to the flow of the document,  they are completely removed.  They do not react with any other DIVs.  The catch here is how the DIV is positioned.  You can use the top, right, bottom, left rules to place the div, however those coordinates need to be referenced from some initial point.  In CSS an absolutely positioned DIV will start it’s coordinates from the next closest relatively positioned DIV.  If there are no relatively positioned DIV’s, then it will get them from the viewport (browser window).

Ok, Cool

I’ve found that getting a good understanding of these position properties really helped eliminate a lot of my layout issues, and allowed me to better think through my layouts from the get-go (that’s an entirely new topic right there).  Whether or not your issue is layout based isn’t as important as the principal of understanding why your offending code is offensive.  If your issue is a mis-interpretation of the standard by the browser or an error in your coding, understanding why it is happening leads to lessons learned and in turn quicker more efficient coding on future projects.

So you’ve isolated your issue, you’ve done some reading and understand why I was happening, now it’s time to resolve the issue.  Oh the joys that resolution brings after a night of explicative riddled development with a side of Microsoft addressed hate mail.