Why Doesn’t My CSS Work? Five Quick Fixes.

Published March 12, 2008 by Rob Glazebrook.

large hammer

Imagine: You’ve been working on your brand new, beautifully cascading style sheet for most of the day. You save your work, load it into a browser, and… what the heck?! Nothing’s working right! You know you didn’t make any huge errors in your code, but something is obviously wrong.

We’ve all been there before. But instead of wasting endless hours debugging your code, here are a few very simple things you can check in your CSS before you start pulling out your hair.

Closing brackets are notoriously easy to miss, especially if you don’t put them on a line all by themselves (and I usually don’t). Missing a single closing bracket can throw off your entire website, because the browser quits loading your rules as soon as it encounters the malformed code.

.sidebar {
	width: 200px;
	background-color: #333;
.sidebar h3 {
	/* None of these rules are applied! */
	font-size: 1.4em;
	color: #fff; }

A missing semicolon can likewise cause your code to start behaving wonky. CSS specifications state that you don’t need a semicolon on your very last rule before your closing bracket, but in my experience that’s a great way to set yourself up for some heartbreak. As soon as you decide to add one more rule to that property, that missing semicolon is going to rear its ugly head.

.sidebar {
	width: 200px;
	background-color: #333
	/* The following rule won't render! */
	padding: 5px;
}

Is there any chance you have a misspelled class or ID? It may sound obvious, but I’ve spent far too much of my life trying to debug my CSS just because I misspelled something along the line. This, if anything, is a good reason to stick to whole words (or at least common abbreviations) when writing your CSS classes and IDs – it’s going to be easier to notice a misspelling in the “leftSidebar” class than it is the “ltSdbr” class.

.siedbar {
	/* Dunno what a siedbar is, but I'm
	   pretty sure it's not in my XHTML. */
	width: 200px;
}

Misspelled properties or values have also caused me more than their fair share of trouble. There are certain words I tend to misspell when I’m typing too quickly, and it just so happens that there are a lot of CSS properties with related names. I don’t care how much I’m “in the zone,” there’s still about a 50% chance I’m going to try to apply a “bakcground-color” somewhere along the line.

.sidebar {
	/* The following property does exactly 
	   bupkis. Dyslexics Untie! */
	bakcground-color: #333;
}

Bad CSS values can be a bear to hunt down, particularly if you’re convinced that the value you’re using really exists. Some invalid values are more obvious than others – a background-color of “1px” would be relatively easy to spot, but what about a vertical-align of “center,” like I mentioned last week? We tend to think of things as being either aligned to the top, center, or bottom of a space… but CSS classifies that second option as the “middle,” not the center. An alignment of center won’t create nearly the presentation you’re expecting.

.sidebar img {
	/* This image isn't really going anywhere. */
	vertical-align: center;
}

If you start your CSS debugging by looking at these five common problem areas first, there’s a good chance you’ll save yourself a whole lot of time – and a massive headache to boot. If you have any other ideas for common areas of CSS misstep, offer them up in the comments!

21 Responses

  1. Rob Glazebrook (Author) (reply)

    Both great suggestions. :) Thanks, guys! If I get enough submitted tips, I’m hoping to put together an article in the future consisting of user-submitted tips (with attribution, of course!). Keep ‘em coming!

  2. Custom Wordpress Designs (reply)

    Some great tips. I usually run my css file through a validator to check on things, but a lot of times I notice I forget to close out comments in the css file.

    /* COMMENT HERE */

    It’s supposed to look like above, but I always end up with:

    /* COMMENT HERE /*

    This will throw everything off as well.

  3. Pingback: Pages tagged "css"

  4. Pingback: 10 errori comuni nello sviluppo dei CSS : cssblog.it

  5. Pingback: TechBlogy | BlogSphere of Technology

  6. Pingback: Why doesn’t my CSS work?

  7. Pingback: 15 Surefire Ways to Break Your CSS

  8. Pingback: 15 Surefire Ways to Break Your CSS « Internet Turnkey Websites

  9. Pingback: Colorrage Blog » Blog Archive » 15 Surefire Ways to Break Your CSS

  10. Pingback: 15 Surefire Ways to Break Your CSS « Why Limit Media

  11. Pingback: 15 Surefire Ways to Break Your CSS | CSS Heaven

  12. Julian (reply)

    If I have to learn software language to repair errors in others code, they can just take a dive. I use the net not to become Chief Geek and Scribe but for work and entertainment and WORK does not mean learning how to write and interprate software FUBAR.

  13. herory24 (reply)

    When I start css with steam,there reads “steamStarup()failed:SteamStartup(0xf,0023E1AC) failed with error 1: failed to take master pipe connection lock”
    PLEASE HELP

  14. JulienDePicardie (reply)

    Well, I have created a correct .css style sheet with a correct html file, but the .css wasn’t modifying anything within my html file.
    The solution I have found is to explicitly add between and the following line:

    where “style.css” is to be replaced with your css sheet.

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>