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.

General Questions /

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

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

Cascading Style Sheets for IE8 including within <Header> ?


Reply


3 Posts   2275 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 :)