Browser stylsheet conditionals don't work with BlogEngine

Aug 17, 2010 at 5:33 AM

I am working in converting a WordPress theme into BlogEngine. The theme uses browser conditionals to load the proper style sheet for the version of IE. Like this:

 <!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" media="all" href="ie6style.css" href="ie6style.css" />
<![endif]-->

The problem is that the stylesheet gets loaded in any browser as if the conditional was not there.  Looking at the HTML source, that link was converted by BlogEngine to

<link href="/BlogEngine.NET/themes/Standard/css.axd?name=ie6style1.6.2.1.css" media="all" type="text/css" rel="stylesheet">. I got this from Firefox and it shouldn't be there.

It seems the css handler does this. The question is: does BlogEngine support conditionals in nonstandard way? Is there an easy solution before I spend time creating my own?

 

Aug 17, 2010 at 8:33 AM

I disabled the css handler and now I find out that the AddGlobalStyles() method removes all the css links from the header including from within the conditionals and re-adding them in the header.So basically all the css files are being added no matter what.

This is my first attempt to do any work with BlogEngine and so far the experience has been frustrating to the point where I might have to look at another ASP.NET blog engine.

Aug 17, 2010 at 9:45 PM
Did you uncheck the box under "Advanced Setting" (Settings.aspx) marked "Trim stylesheets"? I wouldn't get frustrated too easily. I'm a recent WP to BlogEngine convert, and though I still run into things that I know how to do in WP that I can't figure out in BE, it's usually my knowledge that's the problem, not BE.
Aug 18, 2010 at 1:45 AM

yes I have compress and trim unchecked however these deal with a different issue. The method which reorganizes the css links doesn't seem to be attached to any setting which means it always runs. So I guess I have to change the code to take of this issue and I have to make sure I use the same code for every future version. There should be an option in settings to leave all css stuff alone.

 

 

Coordinator
Aug 20, 2010 at 12:01 PM

I tested with the Standard theme and another theme for BE 1.6.  In both cases, the rendered HTML includes the conditional comments.  This is what is getting rendered to the browser:

<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" media="all" href="/themes/Standard/css.axd?name=ie6style1.6.0.0.css" />
<![endif]-->

The CSS file is also only getting loaded on IE6 -- not Firefox.  I can see this since my test ie6style.css is setting the background of the page to blue.  This is only appearing in IE6.

If you haven't already, you could try the Standard theme to see if this is some theme related issue.

Aug 20, 2010 at 5:31 PM

If you look at the AddGlobalStyles() method in BlogBasePage.cs , its removes all css controls from the controls collection in the head section and puts them in a link collection. it then adds all the styles in the styles folders as css links and then re-adds the removed links. Personally I don't know what the goal for doing this.

There's nothing in the code that says to ignore the css links if they are in conditional comments or rebuild them properly. When I comment out the call to AddGlobalStyles(), it works fine. This confirms to me that AddGlobalStyles() is messing up the conditional comments. I don't see code not to do this for specific templates.

Coordinator
Aug 21, 2010 at 3:54 AM

I see that.  AddGlobalStyles() is relatively new -- just added in BE 1.6.1.5.  I was testing with BE 1.6 (as noted).  In 1.6, a different function is used ... AddGlobalStyles() didn't exist.

We need to fix this.  Thanks.

Coordinator
Aug 23, 2010 at 6:35 AM

I just checked in 1.6.2.2 which has an improved AddGlobalStyles() that will leave the styles, including conditional comments intact.