Hi all,

I am developing a site in dotnetnuke and would like to know about people's experiences with making their skins/containers work cross-browser and in particular, how to attach a stylesheet with css fixes on a browser specific basis.

Currently I am developing the skin and there are a lot of browser specific fixes that need to be applied. For instance, the skin / containers make heavy use of transparent PNGs, so I really need an IE5.5/6 specific stylesheet to serve GIFs, or use the DXAlpha fix where possible. I also am finding I need to override a couple of extra classes just to get the layout to work in IE7. Some of these fixes don't apply to IE6 and below. So I was thinking to do the following:

Have a Skin.css / Container.css file which renders in a standards compliant browser like opera/firefox

  - Then, depending on the result of browser detection either in javascript or code-behind of the skin:

Apply Skin_IE6.css / Container_IE6.css file which applies IE5.5 / IE6 specific fixes by overriding certain classes

Apply Skin_IE7.css / Container_IE7.css file which applies IE7 specific fixes. etc...

Apply Skin_IE5orless.css / Container_IE5orless.css which serves a basic stylesheet for older IE browsers.

I've worked out how to attach a stylesheet on a browser specific basis in the skin *.ascx.cs code behind file, using the following code:

// After browser detection

HtmlGenericControl link = new HtmlGenericControl("LINK");
link.Attributes.Add("rel","stylesheet");
link.Attributes.Add("type","text/css");
link.Attributes.Add("href", Path.Combine(this.SkinPath, "skin_IE6.css"));
Controls.Add(link);

What I can't figure out is how to override the Container.css file from the container code-behind. There's no property allowing access to the current path of the container (where the fixed css files will be). This means I cannot get my containers to work on their own - I have to attach all IE fix stylesheets for both skin and containers in the skin itself.

Now my question is this: am I going about this in completely the wrong way? Basically does anyone have any advice on how I may either serve multiple stylesheets or apply several browser specific fixes for both skins and containers?

Thank you,

AndyB

Really? That's great news as I wanted to separate the container fixes from the skin fixes so I could re-use the containers elsewhere.

I'm leaning towards using ASP.NET to load the css files as this will allow the small percentage of users with javascript turned off to at least see the page rendered correctly.

Thanks a lot!!

Sure,

Im not at my dev machine right now so what I say is "off the top of my head" - not copy-pasted from code.

Basically, As im sure you know, IE6, IE7 seem to mangle your page that renders fine in firefox. Typically developers write CSS for firefox (which is pretty much standards compliant), then add "hacks" for IE. This can be done in the same skin.css file (look up CSS hacks) but I don't like it - I think its hacktastic and I prefer to separate out my fixes from original css.

So what you can do is in javascript in your skin, attach additional stylesheets. For instance, you could attach skin_IE6.css if the browser is IE6. In here you can override just the styles that need overriding - usually its only a couple of margins here a padding there and your page renders fine. For instance, an example of attaching a css file in javascript can be found here: http://www.google.co.uk/search?hl=en&q=javascript+attach+css&btnG=Google+Search&meta=. Javascript can be inserted directly into the skin ascx file, or the container ascx file. The problem is, if your user has JS turned off, they don't get the fix! (Only ~5% of users have no JS. But depending on your site and target audience, this may vary, or may matter more or less)

Alternatively, you can use conditional comments to attach stylesheets: http://virtuelvis.com/archives/2004/02/css-ie-only. The problem with this is you have to add the conditional comment to the head of the page - in default.aspx. This means your fix is not skin-dependent and also it applies to all portals in DNN - not good.

So the idea I had was can you attach the stylesheets using ASP.NET - needing no javascript? Yes you can. If you create a new skin (you must create an ascx file) you get a code-behind file. Inside the code-behind (which can be C# or VB) you get a Page_Load event. This event is called before the page is loaded and before your skin is rendered. Inside Page_Load you can detect browsers and attach skin files as you like. So, assuming your default skin.css renders perfectly in firefox, you could do this:

// Note - this is the bit that's off the top of my head!

Page_Load()
{
   string cssFixFile = null;

   // Note, "Firefox", "Opera", "Netscape" can all be detected using this method. 
   if (Request.Browser.Browser.Equals("IE"))
   {
      // IE detected
      //

      if (Request.Browser.MajorVersion == 7)
      {
         // IE7 detected - create a full path to the skin_IE7.css file
         cssFixFile = Path.Combine(this.SkinPath, "skin_IE7.css");
      }
      else if (Request.Browser.MajorVersion == 6)
      {
         // IE6 detected - create a full path to the skin_IE6.css file
         cssFixFile = Path.Combine(this.SkinPath, "skin_IE6.css");
      }
      else if (Request.Browser.MajorVersion == 5 && Request.Browser.MinorVersion == 5)
      {
         // IE5.5 Detected - create a full path to the skin_IE5_5.css file
         cssFixFile = Path.Combine(this.SkinPath, "skin_IE5_5.css");
      }
      else if (Request.Browser.MajorVersion <= 5)
      {
         // IE5 or less detected - create a full path to the skin_IE5.css file
         cssFixFile = Path.Combine(this.SkinPath, "skin_IE5.css");
      }

      // etc... more browser detection possible
   }

   // Load in the CSS file for the browser
   if (cssFixFile != null)
   {
      // If a CSS file is needed, this part loads it in
      HtmlGenericControl link = new HtmlGenericControl("LINK");
      link.Attributes.Add("rel","stylesheet");
      link.Attributes.Add("type","text/css");
      link.Attributes.Add("href", cssFixFile ));
      Controls.Add(link);
   }
}

Ok I hope all that made sense. Two other things you need to know. In order for this to work in the code-behind, your skin.ascx file must have a code-behind and in the code-behind file your skin must inherit DotNetNuke.UI.Skins.Skin. This is so it can have the SkinPath property which resolves to the directory of the skin.

So your skin declaration will be MySkin : DotNetNuke.UI.Skins.Skin. Also in the Ascx markup file, make sure it points to the code-behind and it inherits MySkin. Just create a new ascx user control in visual web developer and modify the inherited attribute appropriately.

Another thing is this approach also works for containers. If you create a container called MyContainer and in the aspx code-behind file make it inherit DotNetNuke.UI.Containers.Container, then you also get a SkinPath property. This resolves directly to the container directory so you just place container_IE6.css fix files in there.

The result? A clean separation of browser-specific fixes into separate CSS files that doesn't rely on javascript. Your browser specific css files don't need all the styles from skin.css - just the ones you need to override, which hopefully, wont be many!

Good luck!!! :)