IE Conditional Comments

I'm working on a piece of html code that contains Div tags with background images.  However there is a problem with margins depending on the browser.  What to do? Code for one browser and use conditional comments for another, specifically code the CSS for Firefox and use conditional comments for Internet Explorer.

Conditional comments are a way to serve different css to target IE browsers.  A good resource to learn how to use IE conditional comments is the tutorial on Elated.com.  They provide plenty of examples of condtional comments usage.  Microsoft also has an article about conditional comments that goes into further detail.

Condition comments a great way to keep sane dealing with the styling differences between IE and Firefox and the various versions of IE.  I will definately use them more in my projects and samples.

<!--[if (condition)]>
(HTML to use if condition is true)
<![endif]-->

posted on Friday, September 08, 2006 10:31 AM by AlanL

Comments

# re: IE Conditional Comments

Friday, September 08, 2006 1:15 PM by Eric Cherng
Interesting... never knew about this. Great tip!

# re: IE Conditional Comments

Thursday, October 12, 2006 1:24 PM by Susan Warren
We made extensive use of this approach for our work on Windows Marketplace 2.0 and the Digital Locker. It works extremely well, and we were able to avoid all the hacks and Javascript bandaids with this approach. Two thumbs up.