One of the issues that every DotNetNuke skin designer faces is how to design skins for multiple browsers. Often, getting a skin to work in Firefox, Chrome, Safari and Opera is pretty straightforward and doesn’t require much tweaking. Unfortunately, the same cannot be said of Internet Explorer. Making your skin work with IE6, 7 and 8 along with all the other browsers can be a bit of a nightmare.
I previously addressed this issue in DotNetNuke Tips and Tricks #3: Conditional StyleSheets. In that post, I created a skin object that allows you to conditionally add a stylesheet to the skin based on a condition defined by the designer. This skin object was subsequently added to the core framework and is currently being used by many designers. In fact, Artisteer uses it in all the DotNetNuke skins that their software generates.
Recently, I found a method that I like better than using conditional stylesheets. One of the downsides to conditional stylesheets is that you end 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.
Recently I came across a technique which still allows us to target specific IE versions without using a non-validating hack and just by using pure CSS and a few conditional comments. This technique is one that is promoted by Paul Irish in his post Conditional Stylesheets vs CSS Hacks? Answer: Neither!. While I like the technique, it is one that needs to be slightly modified to work in DNN.
Using Paul’s technique requires using 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 skinning in DotNetNuke 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 skin development and allow you to minimize or eliminate the use of browser specific CSS hacks.