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]-->
";
        Page.ClientScript.RegisterClientScriptBlock
            ("".GetType(), 
            "iespecific", 
            conditionalCode);

Related Post

  • Unique BODY tags per pageUnique BODY tags per page Last week I talked about a situation where the previous programmer had placed the body tag inside the ContentPlaceholder in order to allow for a different body tag on the page. Since this is a pr...
  • Where Does Live Writer Store ThemesWhere Does Live Writer Store Themes I recently changed my theme to one that has a dark background with light content areas and discovered that Windows Live Writer, the blog editor I use to compose my blogs, doesn’t pick up the sty...
  • jQuery UI – Resizable w/ ASP.NET ThemesjQuery UI – Resizable w/ ASP.NET Themes If you've been up to the jQuery web site and looked at the documentation for resizable() you probably thought, "hey, no problem, I can do that."  Well, that's what I thought, too, until I started ...
  • DotNetNuke Modules – Creating Base ModulesDotNetNuke Modules – Creating Base Modules Now that we have DotNetNuke installed into Visual Studio we can go ahead and create our first modules. Actually, creating the modules is pretty simple. But it is even easier to do it wrong, which...
  • ASP.NET Web Design SoftwareASP.NET Web Design Software What if there was a product that would allow you to create your web site themes as easy as you could create a PowerPoint presentation theme?  Wouldn’t that be cool? This past weekend I discovere...