+1-888-365-2779
Try Now
More in this section

Forums / Designing with Sitefinity / Need to use conditional css statements!

Need to use conditional css statements!

8 posts, 0 answered
  1. Mike
    Mike avatar
    221 posts
    Registered:
    19 Aug 2008
    12 Dec 2008
    Link to this post
    Evening guys,

    I have the need to use conditional statements within my SiteFinity project in order to get IE6 to do what every other browser in the world does (doesn't that just annoy you)

    <!--[if lte IE 6]>
    <style type="text/css">
    ...
    </style>
    <![endif]-->

    In effect i have to overwrite some styles contained in my Themes folder only for IE6...

    This is impossible when using ASP.NET Theming as the <link tags render after my conditional statements contained int he head of my Templates.

    This has to be something that has been encountered before by someone, could you please tell me how to use these conditional statements or some other solution to achieve browser compatibility here?

    Thanks
    Dunca
  2. Nikolai
    Nikolai avatar
    216 posts
    Registered:
    21 Nov 2016
    12 Dec 2008
    Link to this post
    Hello Duncan,

    Here is one possible approach -  in you master page codebehind file on the PageLoad event you can check the browser(IE6 /IE7/Firefox...) and add specific CSS file. It should look something like this:
    private void Page_Load(object sender, System.EventArgs e)  
            {  
      
                //Check to see what kind of browser is requesting the page  
                HttpBrowserCapabilities Browser = Request.Browser;  
                //Attach a CSS style sheet accordingly  
                if (Browser.Type == "InternetExplorer6")  
                {  
                    RegisterClientScriptBlock ("CSSLink""<LINK href='Style/NetStyle.css' type='text/css' rel='STYLESHEET' />");  
                }  
                else  
                {  
                    RegisterClientScriptBlock ("CSSLink""<LINK href='Style/IEStyle.css' type='text/css' rel='STYLESHEET' />");  
                }  
      

    If this does not help you please write us back.

    Greetings,
    Nikolay
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  3. Mike
    Mike avatar
    221 posts
    Registered:
    19 Aug 2008
    12 Dec 2008
    Link to this post
    Thanks for the reply Nikolay,

    My solution to this was to place the conditional statement within the body of the template:

    ...
    </head>
    <body>
        <!--[if lte IE 6]>
        <style type="text/css">
    ...
        </style>
        <![endif]-->
    ...

    I know this isn't really best practice but my conditional statement is so small it really does not warrant an additional css file or added codebehind and is strictly for IE6 and lower.

    You would think that Microsoft wold have implemented something in the ASP.NET Themes to handle "conditional themes"... Or something similar to a .skin file where css conditions can be placed and rendered after the style sheets... I dunno...

    Anyways this solves my issue for now, i will keep the code you posted as it might come in handy at a later stage.

    Thanks,
    Duncan
  4. Nikolai
    Nikolai avatar
    216 posts
    Registered:
    21 Nov 2016
    15 Dec 2008
    Link to this post
    Hello Duncan,

    Thank you for your follow up. Your idea is also a possible solution.

    Kind regards,
    Nikolay
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  5. eraashishgupta
    eraashishgupta avatar
    50 posts
    Registered:
    26 Nov 2008
    15 Dec 2008
    Link to this post
    Why don't your try
    *html [your class name or id] --------->for IE6
    *+html [your classname or id]----------> for browsers greater than ie6
    and
    simply [your classname or id]----------->for rest of the browsers
  6. James@Nw
    James@Nw avatar
    265 posts
    Registered:
    05 May 2009
    28 May 2009
    Link to this post
    Hi Guys,

    I need to use these conditional CSS files in my project too and I have done what you suggested below.

    In my scenario, I have broken my CSS into formatting.css, nav.css and layout.css and these are being inluced when I run the site.

    I then have a radmenu.css file in my themes folder which only works for skinning the RadMenu in Sitefinity.

    My Ie6Fixes.css file (which I have included as you suggested) seems to load second in the list of CSS files at the time of loading.

    Can you please have a look at my code and let me know if this is correct?

    using System;
    using System.Collections.Generic;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;

    public partial class App_Master_Home : System.Web.UI.MasterPage
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            //Check to see what kind of browser is requesting the page
            HttpBrowserCapabilities Browser = Request.Browser;

            //Attach a CSS style sheet accordingly
            if (Browser.Type == "InternetExplorer6")
            {
                this.Page.RegisterClientScriptBlock("CSSLink", "<LINK href='App_Themes/Default/Css/ie6Fixes.css/ie6Fixes.css' type='text/css' rel='STYLESHEET' />");
            }
            else
            {
                this.Page.RegisterClientScriptBlock("CSSLink", "<LINK href='Style/IEStyle.css' type='text/css' rel='STYLESHEET' />");
            }
        }
    }


    Thanks,
    James
  7. James@Nw
    James@Nw avatar
    265 posts
    Registered:
    05 May 2009
  8. christopher frelin
    christopher frelin avatar
    1 posts
    Registered:
    18 Feb 2010
    18 Feb 2010
    Link to this post
    Here's what I do, and it works:

    #someElement {

       background: red; /* modern browsers */

       *background: green; /* IE 7 and below */

       _background: yellow; /* IE6 exclusively */

    }



Register for webinar
8 posts, 0 answered