DNN skins, CSS, IE7 and Hack Management

Within my travels of the peekaboo bug, and finding several CSS hacks to fix the problem, I discovered a new problem that is waiting on the horizon with the launch of Internet Explorer v7.

The new IE7 will no longer respond to the hacks that have been created for the previous IE broswers even though some of the browser errors will not have been fixed. You can read more about this here: http://www.positioniseverything.net/articles/ie7-dehacker.html

This article details a solution by specifying additional style sheets which only hold specific hacks for each browser. - This actually makes hack management easier, in the future when you need to change or remove a hack, all you will have to do is edit your iehacks.css file.

The problem I came across was specifying any additional stylesheets within DNN as the method that was mentioned within the article could not be used easily.

The method within the article is to create a CC - Conditional Comment which only IE browsers can read which specifies to go to a separate .css file to read the hacks.

Great, the problem is how to get this comment into the code & how to link to this additional css file - iehacks.css file

The comment code needs to be in the head section of the document.


Problem 1) - How do you add this code?

by editing the default.aspx file - not ideal if you want to use a skin on different portals.

by adding the code for each page using the head tag feature on the page settings - not ideal because you have to do this for every page.

Problem 2) - Specifying the URL?
The second problem is that you need to specify the location where you have uploaded the iehacks.css file, so if this is enclosed within your skin zip file it could be located in various areas such as the default portal folder or the portal number folder eg.

"/DNN32TestInstallTemplate/Portals/_default/Skins/myskin/iehacks.css"

My concern here is that if you create a css layout skin for release which contains hacks for all IE browsers, how will you make it easy for people installing the skin to set the skin up? - I can find a solution for my own installs, but how can I easily share the skins that I have made with this specific setup?


Luckily I came across a solution in the DNN forums, kindly provided by Nik from Speerio.

The solution is quite painless if you use Javascript in your skin to inject the IE-specific stylesheet directly into the document's styleSheets collection. - All you have to do is add this code into the top of your skins html.

<script type="text/javascript">

if (document.createStyleSheet)
    document.createStyleSheet("<%= SkinPath %>/iehacks.css");

/*
(All of this commented code is not needed...just providing it here in case a hack is needed for another browser.)

else
{
 var styles = "@import url('<%= SkinPath %>/otherhacks.css');";
 var newStyleSheet=document.createElement("link");
 newStyleSheet.rel="stylesheet";
 newStyleSheet.href="data:text/css,"+escape(styles);
 document.getElementsByTagName("head")[0].appendChild(newStyleSheet);
}
*/

</script>

This method works well, IE and firefox browsers now display the content as intended.

Nik provided this explanation for how the code works:

Typically, you handle browser detection on the server side by checking the user agent. Client-side, it's much easier...just test for the availability of an object or method using if (object) ... or if (method) test. Knowing that certain objects and methods are available only on certain browsers, this is a quick and easy way to implement conditional code.

In this situation, the document.createStyleSheet() is specific to IE, so testing for it before calling the method to inject the spreadsheet has the exact same effect as the conditional hack.

Before document.getElementById() became a standard, you would see a lot of code with document.all() or document.layers() to test if a browser is IE or Netscape. Same concept applied to stylesheets.

Nik

A further link which maybe of interest covering Hacks, IE7 etc. is: http://dean.edwards.name/IE7/intro/

Basically the idea is to fix the IE browsers below IE7 and bring them up to the IE7 level by calling up some javascript code. - It's still in alpha testing, but it sounds pretty interesting.

* * * * * * * * * *
If you are looking for tutorials regarding DotNetNuke and skinning, here are 16 videos to get you started: Skinning Tutorial

DNN Creative Magazine provides DotNetNuke tutorials, articles, reviews all for the DotNetNuke web designer. An issue is released each month. Stats: 86 Videos & 5 MP3 Interviews

dotnetnuke