Alan Le

Another way to deal with css differences

I wrote about using condition comments to deal with the styling differences between across browsers.  Nikhil Kothari suggests another method:

The trick is to programmatically set the class attribute on the HTML tag based on the browser, and you're done. This is obviously where a little bit of javascript comes into play to do detect the browser along with its version and programmatically set the class value as appropriate.

The css would then look like:

div#foo {
  background-color: red;
}
HTML.IE div#foo {
  background-color: yellow;
}
HTML.IE7 div#foo {
  background-color: blue;
}

While its good to know this approach, I would still prefer using IE conditional comments since it just seem clearer to me. There is a main css for Firefox and separate css files for IE6 and IE7 that only contain the css to address the css differences.

Theme vs StyleSheetTheme

I wrote about using conditional comments to serve different css to IE browsers.  There is a little gotcha when using this this with ASP.NET Themes.

When applying themes by setting the "theme" property in the page directive or in web.config, the conditional comments appears before the the App_Theme code in the html source.  The effect is that this will overwrite your conditional comments due to the cascading nature of CSS and precedence.  One way to make the conditonal comments appear out after the css links from App_Theme is to use the StyleSheetTheme attribute instead of the Theme attribute.  This little talked about property will link App_Theme as the first thing in the Head tag (instead of the last).  Now your conditional css comments will take precedence over the styles in the App_theme.

You can read more about this on The Microsoft MSDN Library.

http://msdn2.microsoft.com/en-us/library/ykzx33wh....

Hope this helps.

UPDATE:  Steve Clements writes about another benefit from using StyleSheetTheme.  The StyleSheetTheme property gets applied much earlier during the page lifecycle than the Theme property.  With StyleSheetTheme, your theme will show up during design time. Steve also writes a caveat, "One thing to note is that setting EnableTheming=false doesn't stop applying the styleSheetTheme."

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]-->