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.

We're retiring the forums!

The SilverStripe forums have passed their heyday. They'll stick around, but will be read only. We'd encourage you to get involved in the community via the following channels instead:

General Questions /

General questions about getting started with SilverStripe that don't fit in any of the categories above.

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

Cascading Style Sheets for IE8 including within <Header> ?

Go to End

3 Posts   3136 Views


Community Member, 15 Posts

30 August 2010 at 3:01pm

Edited: 30/08/2010 3:14pm

Does anyone know how I can add in conditional CSS for IE8 for SilverStripe.

I've already looked into &

I have already tested to see whether <!--[if IE]><![endif]--> is functional within the current version of SilverStripe v2.4.1 on Internet Explorer 8.0 with this line of code within <body></body>

<!--[if IE]><p>You are using Internet Explorer.</p><![endif]-->

Which retrieves the output 'You are using Internet Explorer.' when viewed on that particular browser.

Some code which has already been attempted on '' within '<header></header>', the issue the code below has is that when viewed on Internet Explorer it outputs whatever is inside ie.css. And when I view it on Firefox it also outputs whatever is inside ie.css. Which means there is a conflict within the Conditional Comment.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "">
<html xmlns="" lang="en" >
		<% base_tag %>
		<link rel="shortcut icon" href="/favicon.ico" />
	<!--[if IE]><% require themedCSS(ie) %><![endif]-->

I've also tried using ..

<!--[if IE]><link rel="stylesheet" type="text/css" href="$project/css/ie.css" /><![endif]-->

The problem is that the link rel cannot find the directory/path of the cascading style sheet for internet explorer, When I click 'View Source Code' in internet explorer the output is...

<!--[if IE]><link rel="stylesheet" type="text/css" href="mysite/css/ie.css" /><![endif]-->

And the difference between my conditional comment and the data within page.php is the other style sheets have the correct path but the $project/css/ie.css doesn't output the correct path.

<link rel="stylesheet" type="text/css" href="http://localhost/silverstripe/themes/storeyblue/css/form.css?m=1282270534" />

Thanks for your time! and sorry for the wall of text


Community Member, 181 Posts

30 August 2010 at 4:07pm

Try the following in you Page_Controller init() function in Page.php

$theme = SSViewer::current_theme();
$css_path = "themes/$theme/css/";
Requirements::insertHeadTags("<!--[if IE 8]><style type='text/css'>@import url({$css_path}ie.css);</style><![endif]-->");

Put it at the end of the function otherwise it may not cascade correctly. You can change $css_path to use $project if the file is in mysite (or equivalent project directory).




Community Member, 15 Posts

30 August 2010 at 6:14pm

Edited: 30/08/2010 6:22pm

Thanks alot! TotalNet, the code

Requirements::insertHeadTags("<!--[if IE]><style type='text/css'>@import url(themes/" . SSViewer::current_theme() . "/css/ie.css);</style><![endif]-->");

worked like a charm, now when I view my theme in IE it uses the ie.css and when I view my theme in Firefox it uses the layout.css :)