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

Incorrectly placed conditional comments for IE6-7


Reply


3 Posts   1904 Views

Avatar
mocsa

Community Member, 3 Posts

22 August 2008 at 7:30am

Hi folks,
I have the following interesting problem. Like most people, I want to use conditional comments in my Page.ss template to cater for IE bugs like this:

<head>
...
<!--[if lte IE 7]>
<link href="ie_patches.css" rel="stylesheet" type="text/css" />
<![endif]-->
</head>


I also add custom css files to my page in Page.php like this:

class Page_Controller extends ContentController {
function example() {
Requirements::css("typography.css");
}
}


The problem is that no matter what I do, typography.css will end up AFTER the conditional comment in the generated page.

<head>
...
<!--[if lte IE 7]>
<link href="ie_patches.css" rel="stylesheet" type="text/css" />
<![endif]-->
<link rel="stylesheet" type="text/css" href="typography.css" >
</head>


I looked at the source of the Requirements class and I noticed that after it assembles the list of required css files, it simply does a eregi_replace() for the closing </head> tag (see file sapphire\core\Requirements.php line 220, I'm using 2.2.2). Of course, I want the conditional comment to appear LAST so that when it comes into effect it overrides the declarations in typography.css. But because of the logic in the Requirements class, it is impossible to do.
I'd appreciate any suggestions on how can I make the conditional comment appear last? This is one of the last problems I need to solve before my site can go live.
Thank you

Csaba

Avatar
Willr

Forum Moderator, 5513 Posts

22 August 2008 at 3:15pm

Yes this is one of the issues with Requirements. A simple solution is just to use higher CSS Selectors in the conditional stylesheet. Eg if you have "#Content .class { blah}" in your conditional stylesheet I normally get round it by doing "html #Content .class" which even tho it comes before the normal stylesheet it has a higher specificity.

Or you can include the IE stylesheet via requirements aswell (which would therefore keep the stack order)

function init() {
parent::init();
Requirements::css( project() . "/css/default.css");
if($pos = strpos( $_SERVER[ 'HTTP_USER_AGENT' ], 'MSIE' ) ) {
Requirements::css( project() . "/css/ie.css");
$version = substr( $_SERVER[ 'HTTP_USER_AGENT' ], $pos + 5, 3 );
if( $version < 7 ) {
Requirements::css( project() . "/css/ie6.css");
}
if( $version < 6 ) {
Requirements::css( project() . "/css/ie5.css");
}
}
}
}

Avatar
mocsa

Community Member, 3 Posts

22 August 2008 at 7:52pm

Will,
Thanks for your suggestions. I'd go for adding an additional Requirements call in my code since my css files are already complex enough. However, I'll need to be extra careful to put this call in a method which ensures that the IE requirements will be last in the stacking order. This is also quite risky because I might add another Requirements call later somewhere else which might mess up the carefully crafted stacking order.
However, on the long run, I would suggest the introduction of a special tag (something like <% Requirements %>) which will be replaced by requirements in the template, instead of 'replacing' the </head> tag. Actually, I have tought of doing it myself by modifying the core code.
An other solution would be to introduce a special method in the Requirements class which wraps the requirement in an IE conditional comment. The user could supply the condition in a parameter ("lte IE7" in my case). The method could even ensure that such requirements are always added to the end of the chain.
Csaba