Jump to:

17452 Posts in 4473 Topics by 1971 members

Archive

SilverStripe Forums » Archive » Conditional css in wrong place!

Our old forums are still available as a read-only archive.

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

Page: 1 2
Go to End
Author Topic: 143263 Views
  • JonathanParker
    Avatar
    Community Member
    37 Posts

    Conditional css in wrong place! Link to this post

    Using SS 2.2 rc2 and I have notices that the conditional css for ie6 & ie7 are being put in the wrong place:
    From Page template:
    <head>
          <% base_tag %>
          $MetaTags
          <link rel="shortcut icon" href="/favicon.ico" />
          <!--[if lte IE 6]>
             <style type="text/css">
              import url(themes/blackcandy/css/ie6.css);
             </style>
          <![endif]-->
          
          <!--[if IE 7]>
             <style type="text/css">
              import url(themes/blackcandy/css/ie7.css);
             </style>
          <![endif]-->
       </head>

    THis gives a source O/P of:

    <meta http-equiv="Content-Language" content="en"/>

          <link rel="shortcut icon" href="/favicon.ico" />

          
          <!--[if IE 6]>
             <style type="text/css">
              @import url(themes/blackcandy/css/ie6.css);
             </style>
          <![endif]-->
          
          <!--[if IE 7]>
             <style type="text/css">
              @import url(themes/blackcandy/css/ie7.css);
             </style>
          <![endif]-->
       <link rel="stylesheet" type="text/css" href="themes/blackcandy/css/layout.css" />
    <link rel="stylesheet" type="text/css" href="themes/blackcandy/css/typography.css" />
    <link rel="stylesheet" type="text/css" href="themes/blackcandy/css/form.css" />
    </head>

    As you can see from the above the main css files are loaded after the conditional ie css files. This means that any ie correctional css code is over-written by the main css files; in effect making the conditional css for ie6 & ie7 redundant!

    Any suggestions on where this placment is organised or how this can be corrected would be appreciated.

    Regards.

    Jonathan.

  • JonathanParker
    Avatar
    Community Member
    37 Posts

    Re: Conditional css in wrong place! Link to this post

    This may not be the best solution but it appears to set the HTML source to what it should be.

    class Page_Controller extends ContentController {
       function init() {
    parent::init();
          Requirements::themedCSS("layout");
          Requirements::themedCSS("typography");
          Requirements::themedCSS("form");

    // Include the conditional css for ie6 & ie7
    $tags = '<!--[if lte IE 6]>
    <style type="text/css">
    import url(themes/freestyle/css/ie6.css);
    </style>
    <![endif]-->

    <!--[if IE 7]>
    <style type="text/css">
    import url(themes/freestyle/css/ie7.css);
    </style>
    <![endif]-->';
    Requirements::insertHeadTags($tags);

       }

    Gives an HTML O/P of:

    <head>
          <base href="http://localhost/public_html/" />
          <title>Home Page</title>
    <meta name="generator" http-equiv="generator" content="SilverStripe 2.0 - http://www.silverstripe.com" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <meta http-equiv="Content-Language" content="en"/>

          <link rel="shortcut icon" href="/favicon.ico" />
       <link rel="stylesheet" type="text/css" href="themes/blackcandy/css/layout.css" />

    <link rel="stylesheet" type="text/css" href="themes/blackcandy/css/typography.css" />
    <link rel="stylesheet" type="text/css" href="themes/blackcandy/css/form.css" />
    <!--[if lte IE 6]>
    <style type="text/css">
    import url(themes/blackcandy/css/ie6.css);
    </style>
    <![endif]-->

    <!--[if IE 7]>
    <style type="text/css">
    import url(themes/blackcandy/css/ie7.css);
    </style>
    <![endif]-->
    </head>

    The page is still not seeing the conditional css in IE 6 & 7, but I'll work on that now.

    If anybody can see why I'm not picking up the conditional css files then suggestions appreciated.

    Jonathan.

  • JonathanParker
    Avatar
    Community Member
    37 Posts

    Re: Conditional css in wrong place! Link to this post

    Forgot to mention: I also removed :

    <!--[if lte IE 6]>
    <style type="text/css">
    import url(themes/freestyle/css/ie6.css);
    </style>
    <![endif]-->

    <!--[if IE 7]>
    <style type="text/css">
    import url(themes/freestyle/css/ie7.css);
    </style>
    <![endif]-->

    from the page.ss template file.

    Jonathan

  • TF
    Avatar
    Community Member
    10 Posts

    Re: Conditional css in wrong place! Link to this post


    class Page_Controller extends ContentController {
    function init() {
    parent::init();
    Requirements::themedCSS("layout");
    Requirements::themedCSS("typography");
    Requirements::themedCSS("form");

    Sorry for the newbie-question, but where do you find the above code?
    - Which file in which folder?

  • Willr
    Avatar
    Forum Moderator
    5490 Posts

    Re: Conditional css in wrong place! Link to this post

    that code should be in the Page.php file in the mysite/code/ folder

  • JonathanParker
    Avatar
    Community Member
    37 Posts

    Re: Conditional css in wrong place! Link to this post

    Just to finish this post off. All is now working; the conditional css not being picked up was down to the css tag's in the ie6 & ir7 css conditional link files being a different case to those in the main layout & typography files.

    Jonathan

  • sonicparke
    Avatar
    74 Posts

    Re: Conditional css in wrong place! Link to this post

    I didn't realize this was happening until I went looking for why my conditional css wasn't working. I removed it from page.ss & put it in page.php as explained above. The rendered source looks correct but my changes to ie7.css are being recognized by ie7. I'm not entirely sure what's wrong here.

    If you guys could help me troubleshoot this that would be great.
    Here's the url: http://dfiftyfive.com/clients/awaken/

    Thanks!

  • JonathanParker
    Avatar
    Community Member
    37 Posts

    Re: Conditional css in wrong place! Link to this post

    Hi Sonic, I have taken the following from your site:
    <!--[if lte IE 6]>
          <style type="text/css">
          import url(themes/awaken/css/ie6.css);
          </style>
          <![endif]-->
          <!--[if IE 7]>
          <style type="text/css">
          import url(themes/awaken/css/ie7.css);
          </style>
          <![endif]-->

    You start with a conditional that states that if IE is 'later than or equal to' IE6 then apply the ie6.css.
    Can I suggest that you change this to [if IE6] and loose the 'lte'. When viewed by IE7 you will in effect be applying both your ie6 & ie7 correctional code. In theory it should not make much difference, but as we all know this stuff is realy as logical as one assumes. Apart from this I can't see anything else. If this does not help then please guve a bit more detail of exactly what the problem is.

    143263 Views
Page: 1 2
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.