Learn More





DNN Community Blog

The Community Blog is a personal opinion of community members and by no means the official standpoint of DNN Corp or DNN Platform. This is a place to express personal thoughts about DNNPlatform, the community and its ecosystem. Do you have useful information that you would like to share with the DNN Community in a featured article or blog? If so, please contact .

The use of the Community Blog is covered by our Community Blog Guidelines - please read before commenting or posting.

DotNetNuke Tips and Tricks #21: Conditional Styles

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 { color: inherit;}
.ie6 { 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.


There are currently no comments, be the first to post one.

Comment Form

Only registered users may post comments.


2sic Daniel Mettler (124)
Aderson Oliveira (15)
Alec Whittington (11)
Alex Shirley (10)
Andrew Nurse (30)
Anthony Glenwright (5)
Antonio Chagoury (28)
Ash Prasad (22)
Ben Schmidt (1)
Benjamin Hermann (25)
Benoit Sarton (9)
Beth Firebaugh (12)
Bill Walker (36)
Bob Kruger (5)
Brian Dukes (2)
Brice Snow (1)
Bruce Chapman (20)
Bryan Andrews (1)
cathal connolly (55)
Charles Nurse (163)
Chris Hammond (203)
Chris Paterra (55)
Clinton Patterson (28)
Cuong Dang (21)
Daniel Bartholomew (2)
Dave Buckner (2)
David Poindexter (3)
David Rodriguez (2)
Doug Howell (11)
Erik van Ballegoij (30)
Ernst Peter Tamminga (74)
Geoff Barlow (6)
Gifford Watkins (3)
Gilles Le Pigocher (3)
Ian Robinson (7)
Israel Martinez (17)
Jan Blomquist (2)
Jan Jonas (3)
Jaspreet Bhatia (1)
Jenni Merrifield (6)
Joe Brinkman (270)
John Mitchell (1)
Jon Henning (14)
Jonathan Sheely (4)
Jordan Coopersmith (1)
Joseph Craig (2)
Kan Ma (1)
Keivan Beigi (3)
Ken Grierson (10)
Kevin Schreiner (6)
Leigh Pointer (31)
Lorraine Young (60)
Malik Khan (1)
Matthias Schlomann (15)
Mauricio Márquez (5)
Michael Doxsey (7)
Michael Tobisch (3)
Michael Washington (202)
Mike Horton (19)
Mitchel Sellers (28)
Nathan Rover (3)
Navin V Nagiah (14)
Néstor Sánchez (31)
Nik Kalyani (14)
Peter Donker (52)
Philip Beadle (135)
Philipp Becker (4)
Richard Dumas (22)
Robert J Collins (5)
Roger Selwyn (8)
Ruben Lopez (1)
Ryan Martinez (1)
Salar Golestanian (4)
Sanjay Mehrotra (9)
Scott McCulloch (1)
Scott S (11)
Scott Wilkinson (3)
Scott Willhite (97)
Sebastian Leupold (80)
Shaun Walker (237)
Shawn Mehaffie (17)
Stefan Cullmann (12)
Stefan Kamphuis (12)
Steve Fabian (31)
Timo Breumelhof (24)
Tony Henrich (3)
Torsten Weggen (2)
Vicenç Masanas (27)
Vincent Nguyen (3)
Vitaly Kozadayev (6)
Will Morgenweck (37)
Will Strohl (163)
William Severance (5)
Try Evoq
For Free
Start Free Trial
a Demo
See Evoq Live
Need More Information?