IE Conditional Stylesheets

Store UI, layout, design, look and feel; Discussion on the customer facing pages of your online store. Cascading Style Sheets, Themes, Scriptlets, NVelocity and the components in the ConLib directory.
Post Reply
mouse_8b
Commander (CMDR)
Commander (CMDR)
Posts: 115
Joined: Mon Oct 11, 2010 1:21 pm
Location: Austin, TX
Contact:

IE Conditional Stylesheets

Post by mouse_8b » Thu Apr 28, 2011 4:47 pm

Hello,
Is there any way to get conditional stylesheets to work with AC7? I have special CSS rules for any IE less than IE 8, but I cannot figure out how to make the conditional code work with AC7. The designer had this code just before the </head> in the template file.

Code: Select all

<!--[if lt IE 8]>
<link rel="stylesheet" href="styleie.css" type="text/css" media="screen" />
<![endif]-->
I have tried putting this between <headerdata></headerdata> in both the layout and the header, neither of which worked. I tried putting it in the body of my content, which didn't work. I tried taking out the comments since <headerdata> is already commented, which didn't work. I tried putting it at the top of <headerdata> instead of the bottom. I tried to put a <head> section in default.aspx. I've tried every way I can think of to get that piece of text into the header unadultered, but it seems that however Able processes <headerdata> makes that piece of code worthless.

Has anyone else had success with conditional style sheets in AC? My next step would be to create a javascript script that checked which browser is being used and append the appropriate rules to the elements that need them, but that seems silly when there is an official way to get the job done.

User avatar
jmestep
AbleCommerce Angel
Posts: 8164
Joined: Sun Feb 29, 2004 8:04 pm
Location: Dayton, OH
Contact:

Re: IE Conditional Stylesheets

Post by jmestep » Fri Apr 29, 2011 5:48 am

You might try moving the stylesheets out of the theme folder and then pointing the link to the correct one. .net applies all the stylesheets in the theme folder automatically.
Judy Estep
Web Developer
jestep@web2market.com
http://www.web2market.com
708-653-3100 x209
New search report plugin for business intelligence:
http://www.web2market.com/Search-Report ... -P154.aspx

mouse_8b
Commander (CMDR)
Commander (CMDR)
Posts: 115
Joined: Mon Oct 11, 2010 1:21 pm
Location: Austin, TX
Contact:

Re: IE Conditional Stylesheets

Post by mouse_8b » Fri Apr 29, 2011 9:03 am

Thank you! In addition to moving the file, I had to form my headerdata tag like this:

Code: Select all

<HeaderData>
-->
<!--[if lt IE 8]>
<link rel="stylesheet" href="/Style/styleie.css" type="text/css" media="screen" />
<![endif]-->
<!--
</HeaderData>
-->
It looks right in all browsers!

jasonhendee
Lieutenant, Jr. Grade (LT JG)
Lieutenant, Jr. Grade (LT JG)
Posts: 42
Joined: Fri Apr 15, 2011 11:04 pm

Re: IE Conditional Stylesheets

Post by jasonhendee » Mon Jul 16, 2012 6:18 pm

@mouse_8b:

Thank you for offering up your suggestion for conditional stylesheets. I tried it, but there were some things that didn't work well for me. First, the path isn't relative, so in order for this to work properly in my dev and production environments (my dev site doesn't sit on the root of my dev domain), I would have had to change the paths accordingly. Not that big of a deal, but I don't like to have loose ends like that.

So in my attempt to generate relative urls for this method, I created a custom control to be called in the 'HeaderData' section via the '[[ConLib...]]' method, and in doing so, I couldn't get the 'HeaderData' section to properly inject my new lines into the <head> of my document. If I used multiple, broken-apart commented sections (like in your example above), it wanted to place my new lines - and the closing '</HeaderData>' tag into the body of my document. If I didn't use multiple commented sections, and instead placed the '[[ConLib..]]' call directly between the opening and closing 'HeaderData' tags, it simply printed my custom control call directly on the page in plain text. So it's apparent that this header field simply wasn't designed to look for custom controls like the the content field does.

I went a different way, and it appears to be working. Maybe some of you seasoned .Net developers can tell me if there is any reason why this is a bad idea. Based on the reasoning I found here: http://www.selarom.net/blog/2011/04/05/ ... ments.aspx, I added the following to the 'Scriptlet.master':

Code: Select all

<script runat="server">
    protected override void Render(HtmlTextWriter writer)
    {
        //less than IE9
        string style = "<!--[if lt IE 9]>";
        style += "<link rel=\"stylesheet\" href=\"" + this.ResolveUrl("~/IEStyles/ltie9style.css") + "\" type=\"text/css\" media=\"screen\" />";
        style += "<![endif]-->";
        Literal styleCtrl = new Literal();
        styleCtrl.Text = style;
        head1.Controls.Add(styleCtrl);
        base.Render(writer);
    }
</script>
Jason Hendee
Cables for Less

mouse_8b
Commander (CMDR)
Commander (CMDR)
Posts: 115
Joined: Mon Oct 11, 2010 1:21 pm
Location: Austin, TX
Contact:

Re: IE Conditional Stylesheets

Post by mouse_8b » Wed Jul 18, 2012 10:04 am

I can't speak to whether or not that method is a good or bad idea, but I have updated my solution, so I thought I would post it. This code works better than my original solution. This might be considered a bit of a hack, but it works pretty well.

Code: Select all

<!--[if lt IE 8]>
<link rel="stylesheet" href="/OtherStyles/styleie.css" type="text/css" media="screen" />
<![endif]-->
<!--[if IE 8]>
<link rel="stylesheet" href="/OtherStyles/styleie8.css" type="text/css" media="screen" />
<![endif]-->
</HeaderData>
Notice the ">" instead of the ">" after the "[endif]". I think the AC system just looks for the end of the HTML comment instead of the acutal </HeaderData> tag. Using ">" prevents the system from stopping parsing the header on the closing comment tag. When it is output to the browser, the ">" is rendered as ">", and the browser has a properly formatted HTML comment.

Post Reply