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'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.

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   3547 Views

Avatar
1k2k3

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 http://doc.silverstripe.org/css & http://msdn.microsoft.com/en-us/library/ms537512%28VS.85%29.aspx

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 'Page.ss' 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" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" >
	<head>
		<% base_tag %>
		$MetaTags
		<link rel="shortcut icon" href="/favicon.ico" />
		
	<!--[if IE]><% require themedCSS(ie) %><![endif]-->
	</head>

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

Avatar
TotalNet

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).

hth

Rich

Avatar
1k2k3

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 :)