cross check your css.

If you do not have a lot of time or experience with CSS, here are some quick ways to save yourself headaches down the road. If you have read my blog before, this is nothing new, but I cannot stress these points enough.

1. Validate your code. By simply validating your code, you can learn a lot about CSS, as well as find picky errors which might wreak havoc on your code (missing closing bracket, etc).
2. Look at your site in more than one browser. I have been a part of several projects that have been built to “look ok in Firefox” but are a disaster in Safari and IE. Usually if you check your work in two browsers (IE and Firefox) or even just Safari and Firefox (for the more advanced developers that are aware of IE issues) you will save much frustration later.
3. Look at your changes often. I will generally make small changes, then check out the changes in IE, Safari, and Firefox. If all looks good, I move on. If not, I at least know the problem lies in a small chunk of code.
4. Use background colors to troubleshoot. In the last few months, this tip alone has saved me countless hours and bottles of Advil. Floats with margins and padding often appear correctly in one browser but not another. Why? Usually they have some issues with width. Do you really know where your float boundaries are? I don’t…so I will add a temporary background color to my containers so I can see exactly how wide everything looks. This also works well for general spacing issues. You can easily see if it is the rogue padding or margins belong to a certain class or div. When working with several layers of divs…this is an easy way to save time.

Questions? Comments? Let me know!