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.

Conditional css in wrong place! » Archive

We've moved the forum!

Please use forum.silverstripe.org for any new questions (announcement).
The forum archive will stick around, but will be read only.

You can also use our Slack channel or StackOverflow to ask for help.
Check out our community overview for more options to contribute.

Archive /

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

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

Conditional css in wrong place!

Go to End


9 Posts   145157 Views

Avatar
JonathanParker

Community Member, 37 Posts

30 March 2008 at 4:59am

Edited: 30/03/2008 5:18am

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

Community Member, 37 Posts

30 March 2008 at 6:20am

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

Community Member, 37 Posts

30 March 2008 at 6:23am

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

Community Member, 10 Posts

30 March 2008 at 9:48am

Edited: 30/03/2008 9:49am


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

Forum Moderator, 5523 Posts

30 March 2008 at 12:36pm

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

Avatar
JonathanParker

Community Member, 37 Posts

30 March 2008 at 1:05pm

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

74 Posts

5 June 2008 at 8:55am

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

Community Member, 37 Posts

5 June 2008 at 10:26pm

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
Go to TopReturn to top