Being someone who has switched (quite successfully, I might add) to entirely CSS-based layouts, I get a lot of people asking me CSS questions. Well, I’m tired of answering them, so here’s a step-by-step guide to solving your CSS problems.

1. Empty your cache. This is so simple, but bites people all the time. There are other things you can do, but the idea here is to make sure that what you’re looking at in your browser is the same thing you’re looking at when you edit your CSS.
2. Validate your markup. Malformed markup makes CSS behave unpredictably. Validity isn’t important here, only well-formedness. Make sure everything’s nested and closed properly.
3. Validate your CSS. This is a good place to start, and will tell you if you’ve made a stupid mistake like forgetting a semicolon or closing brace.
4. Make sure your selector is correct. Set the outline property to something obvious; I use 5px solid red. You can use border or background-color if your browser doesn’t support outline, but those change the positioning of elements, which can lead to other problems. In any case, if you don’t see your outline/border/background, you know your selector is wrong, or you have a dupe selector which is overriding the one you’re working with. This would also be a good time to read up on CSS selectors. There are a lot of handy things in there that most people don’t use.
5. Make sure your style does what you think it does. Read the spec for your style statements. Stuff isn’t always what it seems, like vertical-align. Some types have subtleties; url() must be specified relative to the stylesheet’s URL, not the document’s URL. If you’re dealing with any units of measurement, you must append the unit! e.g. margin-left: 30; is wrong; there’s no way to know if that margin is pixels, ems, percent, etc. Make sure that hex colors have the preceding #. You should have caught this when you validated your CSS.
6. Make a minimal testcase. If you still haven’t found your problem, get really simple. Drop the markup you want to style into a blank X/HTML document, and the style for it into an inline style block. Break your problem down to the smallest, simplest thing you can. Use the most basic markup and style possible. Having multiple problems? Start with one, and the others will probably fall into place. Does it work? If it does, something in your full markup/style is interfering. Find and fix it. Doesn’t work? Tweak it until it does, and drop it back in your page. Check your testcase with a different browser; you may have encountered a bug or unsupported style. You should probably do this after you validate your CSS, too.
7. Comment stuff out. Start with the block of style you think is giving you trouble, and comment out individual styles. Then start commenting out each block of style, until you find the one that’s causing problems.
8. Comment more stuff out. If you get everything commented out in your stylesheet, start commenting out your markup. Make sure you keep things well-formed. Don’t mix HTML 4 style presentational attributes (e.g. cellpadding) with CSS.
9. Try a different approach. Browser bugs may be preventing you from accomplishing what you want, or you just may not understand the way the specs interact. Try something else. Can’t get floats working? Try absolute positioning. Top margin on an element doesn’t work? Set the bottom margin on the element preceding it. There’s almost always more than one way to accomplish the same effect, so experiment until you find one that works for you. Don’t be afraid to experiment! A hands-on session will almost always teach you something new. Your layout is already broken, so don’t worry about breaking it more.
10. Ask someone else. If you’ve gone through everything there, ask someone who knows CSS to help you. Ask only after you have completed these steps! Your “CSS guy” is a precious resource; don’t piss him off by asking questions you could have found the answer to if you had taken a little initiative. Going through these steps will not only solve your problem, but make you better at CSS. As you develop your CSS skills, you’ll have less problems.

This entry was posted on Thursday, May 19th, 2005 at 12:37 am and is filed under CSS. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.