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

Avatar
1k2k3

30 August 2010 at 3:01pm (Last edited: 30 August 2010 3:14pm), Community Member, 15 Posts

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

30 August 2010 at 4:07pm Community Member, 181 Posts

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

30 August 2010 at 6:14pm (Last edited: 30 August 2010 6:22pm), Community Member, 15 Posts

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