cross check your css.

CSS Hints Web Development

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!

2 thoughts on “cross check your css.”

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.


Six Feet Under Re-runs

The last few weeks I have been waking up early on Saturdays to catch the Six Feet Under re-runs. If you did not catch these on HBO the first time around or are interested in catching a really great show, check out the re-runs every Saturday on Bravo.

CSS Serenity Now! Web Development

Internet Explorer Pickiness With CSS

For a browser that is hardly standards compliant, Internet Explorer still infuriates me and acts as my arch enemy when debugging CSS. How about an example? This code works in Safari, FireFox, Opera but not IE: .heading { background: url("images/heading-bg.gif")repeat-x; color:#fff; font-size:1em; margin:5px 0 5px 5px; border:1px solid #292929; padding-left:3px; line-height:21px; } The result: The […]