Jump to:

22998 Posts in 11620 Topics by 2827 members

General Questions

SilverStripe Forums » General Questions » Cascading Style Sheets for IE8 including within <Header> ?

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

Page: 1
Go to End
Author Topic: 2046 Views
  • 1k2k3
    Avatar
    Community Member
    15 Posts

    Cascading Style Sheets for IE8 including within <Header> ? Link to this post

    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

  • TotalNet
    Avatar
    Community Member
    181 Posts

    Re: Cascading Style Sheets for IE8 including within <Header> ? Link to this post

    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

  • 1k2k3
    Avatar
    Community Member
    15 Posts

    Re: Cascading Style Sheets for IE8 including within <Header> ? Link to this post

    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

    2046 Views
Page: 1
Go to Top

Want to know more about the company that brought you SilverStripe? Then check out SilverStripe.com

Comments on this website? Please give feedback.