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.

Archive

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

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

Conditional css in wrong place!


Go to End
Reply

9 Posts   143333 Views

Avatar
JonathanParker

30 March 2008 at 4:59am (Last edited: 30 March 2008 5:18am), Community Member, 37 Posts

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.

Avatar
JonathanParker

30 March 2008 at 6:20am Community Member, 37 Posts

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.

Avatar
JonathanParker

30 March 2008 at 6:23am Community Member, 37 Posts

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

Avatar
TF

30 March 2008 at 9:48am (Last edited: 30 March 2008 9:49am), Community Member, 10 Posts


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?

Avatar
Willr

30 March 2008 at 12:36pm Forum Moderator, 5511 Posts

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

Avatar
JonathanParker

30 March 2008 at 1:05pm Community Member, 37 Posts

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

Avatar
sonicparke

5 June 2008 at 8:55am 74 Posts

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!

Avatar
JonathanParker

5 June 2008 at 10:26pm Community Member, 37 Posts

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.

Go to Top