The url CSS property and other frequent CSS pitfalls

Monday, January 22, 2007 Labels: css , tips

I noticed that I have been using the url CSS property incorrectly in a lot of our pages. The correct syntax includes single quotes around the image path. For instance:

<td style="background:url(/Controls/images/rel_calc_chooser_b.gif) repeat-x;"></td>

should be:

<td style="background:url('/Controls/images/rel_calc_chooser_b.gif') repeat-x;"></td>

Although, it usually doesn’t cause a problem with Internet Explorer and Firefox 2.0, it can cause some real mischief in older versions of Firefox and current versions of Opera and Safari. I am probably the worst at this, because I simply forget to type them or am usually copying and pasting paths and images into the editor.

I’ve also noticed several other common mistakes as well.

Url paths in CSS files are relative to the stylesheet, not the calling document
Missing pound sign before hex colors
Hex colors that aren’t 3 or 6 characters long
Not including a generic font in font-family attributes (i.e.: font-family: Tahoma, Arial, sans-serif)

I'm horrible about putting in a generic font in my styles.

Tracking down CSS-caused issues is usually a head-ache and quite often a nightmare. The Firefox console provides detailed CSS errors along with the JavaScript errors. It is a good habit to review the console watching for these errors when making changes.

By the way, I found a great utility to clean up and streamline CSS code at http://www.cleancss.com/.