if IE Conditional CSS using ASP.NET Themes

winter-011 Yesterday when I introduced Artisteer I mentioned that they use conditional link comments to include IE6 and IE7 specific CSS in the master page.

In my world, I like to use ASP.NET themes for my CSS, which means the CSS will get included automatically.  So the question is, how can we use Artister with ASP.NET themes?  Or for that matter, how can we include IE-specific CSS as part of our themes?

Once you’ve moved the IE-specific CSS into your themes directory, you’ll want to change the extension to something other than CSS so that ASP.NET will pick it up.  I just reversed mine so that the CSS is style.css.ie6 and style.css.ie7.

Next we need to write code that will include these two files with the conditional comment code around them.  The best place to do this is in the page_load event of the master page, or if you are using international themes you’ll want to set it right after you’ve set the theme in the PreInit code.

Here’s the code you should add:

        string appPath = Request.ApplicationPath;
        if (appPath.Length == 0)
            appPath = "/";
        else if (!appPath.EndsWith("/"))
            appPath += "/";

        String themeDir = Page.Theme;
        if (themeDir == null || themeDir.Length == 0)
            themeDir = Page.StyleSheetTheme;
        String conditionalCode =
@"<!--[if IE 6]><link rel='stylesheet' href='" +
  appPath + @"app_themes/" + themeDir +
  @"/style.css.ie6' type='text/css' /><![endif]-->
  <!--[if IE 7]><link rel='stylesheet' href='" +
  appPath + @"app_themes/" + themeDir +
  @"/style.css.ie7' type='text/css' /><![endif]-->

Related Post

One Response to “if IE Conditional CSS using ASP.NET Themes”

Leave a Reply

Comment Policy:

  • You must verify your comment by responding to the automated email that is sent to your email address. Unverified comments will never show.Leave a good comment that adds to the conversation and I'll leave your link in.
  • Leave me pure spam and I'll delete it.
  • Leave a general comment and I'll remove the link but keep the comment.

Notify me of followup comments via e-mail