Jump to:

3439 Posts in 1028 Topics by 869 members

Template Questions

SilverStripe Forums » Template Questions » Conditional IE9 css below other css includes

Moderators: martimiz, Sean, biapar, Willr, Ingo, swaiba, simon_w

Page: 1
Go to End
Author Topic: 1627 Views
  • Ronaldo71
    Avatar
    Community Member
    10 Posts

    Conditional IE9 css below other css includes Link to this post

    Hi all,

    I'm pretty new to SilverStripe, so I hope this is the right forum. I'm using the latest 2.4.6 version of SilverStripe.

    I need to override some css3, as IE9 doesn't know how to handle gradients for a css3 button. If I place the conditional IE 9 css code in the Page.ss file, the IE9 css appears above the other stylesheets, and is thus overruled by css code that's included later on in the page.

    In the mycss.css code is a button with background-colors and gradients that should be overruled with background-image for IE9.
    How do I get the conditional IE9 code below the other css includes in the page?
    What makes all the css links to be inlcuded last, just above the </head> tag?
    Or should I build my css differently?

    Here's the Page.ss file:

    <html lang="$ContentLocale">
    <head>
    <% base_tag %>
    <title><% if MetaTitle %>$MetaTitle<% else %>$Title<% end_if %> &raquo; $SiteConfig.Title</title>
       ...
    <% require themedCSS(html5reset-1.6.1) %>
    <% require themedCSS(mycss) %>
    <% require themedCSS(typography) %>
          
    <!--[if IE 9]>
    <style type="text/css">
    @import url($ThemeDir/css/ie9.css);
    </style>
    <![endif]-->
    </head>

    resulting in this html source:

    <html>
    <head>
    <title>...</title>
    ...      
    <!--[if IE 9]>
    <style type="text/css">
    @import url(themes/mytheme/css/ie9.css);
    </style>
    <![endif]-->

       <link rel="stylesheet" type="text/css" href="/themes/mytheme/css/layout.css?m=1320405045" />
    <link rel="stylesheet" type="text/css" href="/themes/mytheme/css/typography.css?m=1241147393" />
    <link rel="stylesheet" type="text/css" href="/themes/mytheme/css/form.css?m=1320663476" />
    <link rel="stylesheet" type="text/css" href="/themes/mytheme/css/mycss.css?m=1320915473" />
    </head>

    The mycss.css looks like:

    .btn_green {
       cursor: pointer;
       text-decoration:none;
       border: 3px solid rgb(255, 255, 255);
       padding: 10px 10px 10px 10px;
       text-shadow: 1px 1px 3px rgb(51, 51, 51);
       border-radius:5px 5px 5px 5px;
       -moz-border-radius:5px 5px 5px 5px;
       -webkit-border-radius:5px 5px 5px 5px;
       box-shadow:0px 0px 10px rgba(51, 51, 51, 0.95);
       -moz-box-shadow:0px 0px 10px rgba(51, 51, 51, 0.95);
       -webkit-box-shadow:0px 0px 10px rgba(51, 51, 51, 0.95);
       background-color: rgb(255, 255, 255);
       background-image:linear-gradient(-90deg, rgb(148, 192, 31), rgb(111, 144, 23));
       background-image:-webkit-gradient(linear, 50% 0%, 50% 100%, from(rgb(148, 192, 31)), to(rgb(111, 144, 23)));
       background-image:-moz-linear-gradient(-90deg, rgb(148, 192, 31), rgb(111, 144, 23));
    }

    and the IE9.css looks like:

    .btn_green {
       width: 163px;
       height: 57px;
       background-image: url(../images/layout/btn_green.png);
    }

    Thanks!
    Ronald

  • simon_w
    Avatar
    Forum Moderator
    471 Posts

    Re: Conditional IE9 css below other css includes Link to this post

    The Requirements system puts the required CSS just before the closing head tag. This means that the CSS tags are always in a valid location (as you can call <% require css/themedcss %> from anywhere in your template).

    To add something after the CSS tags, you can use Requirements::insertHeadTags($html) in your controller's init() method.

  • Ronaldo71
    Avatar
    Community Member
    10 Posts

    Re: Conditional IE9 css below other css includes Link to this post

    Hi Simon,

    Thanks for your reply. As it turned out, I mis-spelled the name of the image and thus it didn't work. #facepalm
    It works now, even though the IE9.css is above the other css includes.
    Nonetheless, it's good to know how the *magical* internals work, and I have a long way to go.

    1627 Views
Page: 1
Go to Top

Want to know more about the company that brought you SilverStripe? Then check out SilverStripe.com

Comments on this website? Please give feedback.