Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

Template Questions

Conditional IE9 css below other css includes


Reply

3 Posts   1666 Views

Avatar
Ronaldo71

10 November 2011 at 11:44pm (Last edited: 10 November 2011 11:45pm), Community Member, 10 Posts

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

Avatar
simon_w

11 November 2011 at 8:00am Forum Moderator, 474 Posts

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.

Avatar
Ronaldo71

11 November 2011 at 8:04am Community Member, 10 Posts

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.