Targeting Firefox, IE 7, and IE 6 (and older) browsers via CSS

Thursday, August 16, 2007 Labels: ,

The tip for today's post is applying different styles to IE 7, IE 6 and older, and all the other browsers out there without having custom script or changing out style sheets. It’s simple too!

1) First, create your normal style, which of course applies to all browsers:
  padding: 2px 6px 2px 6px;
2) Then, create the style you’d like to apply only to Internet Explorer 7:
  #padding: 1px 6px 1px 6px;
3) Now, create the style to apply only to Internet Explorer 6 and older:
  /* _padding: 3px 4px 3px 4px; */

There you have it! Now you can target the three main browsers: IE 6, IE 7, and everyone else.

Technically, step 2 doesn’t only apply to IE 7, but really applies to all Internet Explorer browsers. In other words, if you wanted to target all IE browsers only steps 1 and 2 are needed.

I don’t remember where I found this. I believe parts came from a couple of different sources, but anyway, it’s a great hack – especially when used together.

The url CSS property and other frequent CSS pitfalls

Monday, January 22, 2007 Labels: ,
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/.
Older Posts