Any DotNetNuke skin designer who has spent much time working with Cascading Style Sheets (CSS) has discovered that each browser has slightly different support for the various CSS versions. To further complicate CSS usage, each browser has a different set of bugs and/or understanding of what a particular standard requires. Internet Explorer is definitely the worst offender and the furthest from fully and faithfully supporting CSS 2.1. While support has been steadily improving between versions, it is still not on par with other modern browsers.

Typically, DotNetNuke skin designers use a number of different hacks to target CSS at specific browsers in order to work around the inconsistencies. The process generally starts with a skin design which renders correctly in Firefox and then the designer adds hacks to get it to work in IE. To make matters worse, Microsoft has made changes in each subsequent version of IE such that a hack that worked in IE5.5 will not necessarily work in IE8 or IE9.

Making your skin work with IE7, 8 and 9 along with all the other browsers can be a bit of a nightmare. As such DotNetNuke skin designers can address it by creating a skin object that allows to conditionally add a stylesheet to the DotNetNuke skin based on a condition.  

However there are several downsides of using conditional stylesheets to the DotNetNuke skin which are listed below:

  • ·         It ends up causing stylesheet bloat.
  • ·         Conditional stylesheets add round trips to the server which we should be trying to minimize.
  • ·         Conditional stylesheets also require you to maintain multiple stylesheets which can be a little painful.
  • ·         If you make a change in your main stylesheet, you will need to find the corresponding section in your IE specific stylesheets and potentially make changes to them as well.

From a maintenance and development perspective, this is far from optimal.

Using the technique discussed in this article the DotNetNuke skin designer can target specific IE versions without using a non-validating hack and just by using pure CSS and a few conditional comments.

This technique requires using of conditional comments to add a specific class to the body tag.

<!--[if lt IE 7 ]> <body class="ie6"> <![endif]-->

<!--[if IE 7 ]>    <body class="ie7"> <![endif]-->

<!--[if IE 8 ]>    <body class="ie8"> <![endif]-->

<!--[if IE 9 ]>    <body class="ie9"> <![endif]-->

<!--[if gt IE 9]>  <body> <![endif]-->

<!--[if !IE]><!--> <body> <!--<![endif]-->


This essentially adds the appropriate IE class to the body tag using just conditional comments.  The beauty of this technique is that now you can use CSS selectors in your main stylesheet to target specific browsers.  All of the browser specific overrides are kept together with the primary

 div.foo { color: inherit;}

.ie6 div.foo { color: #ff8000; }


When creating a DotNetNuke skin you don’t have control over the head section or the body tag so we can’t use this technique directly.  Instead, what we can do is create a master <div> element around the entire body of our content and use this technique to attach the appropriate class to this div.

Using this technique, it is important for you to specifically add the control panel skin object to your skin so that it is inside this wrapper.  If you don’t add the control panel to your skin, then DotNetNuke will automatically inject one, but it will end up outside the main div with your IE classes.  This is not a big deal if you don’t plan on styling the control panel, but if you want to have a custom style for the control panel that matches the rest of your skin, you will want to add the skin object directly.

Using this technique should greatly simplify your DotNetNuke skin development and allows you to minimize or eliminate the use of browser specific CSS hacks.