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

We've moved the forum!

Please use forum.silverstripe.org for any new questions (announcement).
The forum archive will stick around, but will be read only.

You can also use our Slack channel or StackOverflow to ask for help.
Check out our community overview for more options to contribute.

Template Questions /

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

Conditional IE9 css below other css includes

3 Posts 2939 Views

Ronaldo71

Community Member, 10 Posts

10 November 2011 at 11:44pm

Edited: 10/11/2011 11:45pm

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

(deleted)

Community Member, 473 Posts

11 November 2011 at 8:00am

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

Community Member, 10 Posts

11 November 2011 at 8:04am

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.

Return to top