5 Late Night Tips for Avoiding CSS Headaches

I just finished writing an email to a friend helping him out with some CSS trouble he was having. I decided that the 5 tips I put at the beginning of the letter is good CSS advice for all of us… And although it might not be perfect… when your learning how to program CSS, it’s probably best to implement some of these things… Cause it can only save you from a headache.  So without further adu… the 5 tips:

1. Always build for firefox, and then fix IE… Never the other way around. Why? Because Firefox is standards compliant… IE is not (yet). There are fixes for the problems in IE. There are no fixes for the problems in firefox (because it’s all standardized). That said, if it looks bad in firefox, it’s probably because your taking advantage of something broken in IE, and how do you “break” firefox to fix it :-). So that said… code from firefox! 🙂
2. Make use of Firebug and Webmaster Toolbar (both in firefox), it will allow you to code realtime, which is priceless when it comes to debugging.
3. Start your css with the following line:
   * {margin: 0px;padding: 0px;}

   The reason: it basically gives you a leg up on building with the box model because every single object has the same margins and padding to start with (where as, they normally don’t… For example ul’s tend to have a margin of like 15 or something… which can throw everything off.)

4. Get in the habit clear “clearing” sections… Namely by using clear: both;. If you treat each section of your webpage as just that… a section… then at the end of every section that has a float, you need to be sure you have something that is clearing everything… otherwise the float from the previous section may have adverse affects on the next section.
5. Lastly: when all else fails… clear all the formatting… and start over…. and work your way down… Building CSS on top of existing content is probably the easiest way to do it… and it’s much easier to work top to bottom than it is any other direction when it comes to building layout.

Hope someone found this useful… It’s time for me to write another post…