I like to complain about browser inconsistency and rendering bugs as much as every other front-end developer, but it’s fairly common that the issues I’m experiencing are PEBKAC rather than IE induced. Now I know these won’t apply to most of you perfect coders out there, but I’m betting that at least a couple will ring true.

  1. Typos
    My most common blunder (by far) in writing CSS is misspelling selectors and properties. I went on a rant about my tendency to spell position as positon back in 2005 and that one still gets me occasionally. Most of the time syntax highlighting saves the day, but there’s no help for misspelled selectors like #haeder, .waring, and .altarnate.
  2. Missing Units
    When using negative text-indent for text replacement, the set dimensions are the only thing holding open the block. If you leave off a unit (height:335;) that block will completely disappear. As you might have guessed, this has never happened to me.
  3. Z-idiot
    Z-index is a practical and powerful tool when designing with CSS. The number one rule to remember when working with z-index is that the position property has to be set to relative (not realtive…), fixed or absolute. I’ve been known to arbitrarily insert z-index all over my CSS…and then I realize the element I’m trying to stack doesn’t have a position declared.
  4. Background Position
    Is it bottom 100px or 100px bottom? That question used to always trip me up. Then I’d get confused when it was broken in Firefox. The W3Schools’ documentation of the background-position property is fairly straightforward when it comes to similar units. When using % or position values, you declare the horizontal (x) position and then the vertical (y). When you use keywords however, the examples suggest to declare the vertical keyword (top, center, bottom) first. So, what if you want to mix keywords and values? In that case you follow the %/position convention and give the horizontal value first. To answer my own question, it should always be 100px bottom. For more info and examples, see my Background Position Compendium post.
  5. Bang Important
    Cascading order and inheritance in CSS is a beautiful thing…until you start working on a large family of sites that inherits rules from multiple external stylesheets. I personally see the !important rule (.error {color:red !important;}) as a hack and therefore try to avoid using it. Occasionally though, it’s a handy tool and a necessary evil. Just remember what properties of which elements you’ve set to important or you’re bound to pull your hair out later when you want to override them. If you need a quick refresher course, David Hellsing has a great article on Cascading Order and Inheritance.