How do I add an IE7-and-lower-only stylesheet to an XSL page? I tried adding it into the template for header information like so:
<xsl:template name="header">
<!--[if lte IE 7]>
<link rel="stylesheet" type="text/css" href="/rcm/verisign/style/2012/ie7.css"/>
<![endif]-->
</xsl:template>
And the conditional never gets executed in my document, even though I use the same snippet in HTML-only documents and it works fine. What gives?
The comment will be seen by the parser as a comment in the XSL, and will be dropped from the generated HTML code.
If you want to generate a comment into your HTML, you need to enclose it inside a CDATA block, so it will be seen by the XSL parser as plain text to be copied to the destination document verbatim.
The code would look like this:
<![CDATA[
<!--[if lte IE 7]>
<link rel="stylesheet" type="text/css" href="/rcm/verisign/style/2012/ie7.css"/>
<![endif]-->
]]>
Everything between <![CDATA[ and ]]> will be treated as plain text.
Hopefully that should answer your question.
However, if at all possible, I'd suggest the best solution here would be to drop support for IE7. The usage stats for it have dropped through the floor in the last six months or so - it's almost as low as IE6 now; there's hardly anyone still using it. I appreciate in some cases you may not have a choice, but if you do have a choice, my advice is to drop it.
[EDIT]
Okay, after further research, it seems you're right: a plain CDATA block does escape its output (despite claims to the contrary in many places).
Instead, you need to use <xsl:comment> to generate an HTML comment in the output. Doing this with conditional comment syntax gets quite messy, and you will probably still need to use CDATA.
The best example I can find is here: http://getsymphony.com/download/xslt-utilities/view/21798/
As you can see, it's quite a lot of code.
A short version (without the flexibility) might look like this:
<xsl:comment>
[if lte 7<![CDATA[>]]>
<link rel="stylesheet" type="text/css" href="/rcm/verisign/style/2012/ie7.css"/>
<![CDATA[<![endif]]]>
</xsl:comment>
Hope that helps. Sorry the original answer was incomplete.
Here is one proven way to do it -- this is one of the rare cases when DOE is helpful:
<xsl:text disable-output-escaping="yes">
<!--[if lte IE 7]>
<link rel="stylesheet" type="text/css" href="/rcm/verisign/style/2012/ie7.css"/>
<![endif]-->
</xsl:text>
A complete example:
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output omit-xml-declaration="yes"/>
<xsl:template match="/*">
<xsl:text disable-output-escaping="yes">
<!--[if lte IE 7]>
<link rel="stylesheet" type="text/css" href="/rcm/verisign/style/2012/ie7.css"/>
<![endif]-->
</xsl:text>
<p>
Done.
</p>
</xsl:template>
</xsl:stylesheet>
When this transformation is applied on any XML document (not used), the wanted, correct result is produced:
<!--[if lte IE 7]>
<link rel="stylesheet" type="text/css" href="/rcm/verisign/style/2012/ie7.css"/>
<![endif]-->
<p>
Done.
</p>
You have:
<!--[if lte IE 7]>
It should be:
<!--[if lt IE 7]>
Related
In OctoberCMS I can inject a CSS file into my page using:
public function onRun()
{
$this->addCss('http://yui.yahooapis.com/pure/0.6.0/grids-responsive-min.css');
}
I don't know though, how can I check the IE version in the code above? What's the equivalent of the following CSS code in OctoberCMS?
<!--[if lte IE 8]>
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/grids-responsive-old-ie-min.css">
<![endif]-->
<!--[if gt IE 8]><!-->
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/grids-responsive-min.css">
<!--<![endif]-->
The conditional markup you posted as a reference is a HTML conditional markup and therefore cannot be used in the PHP method onRun.
However, you can use the same conditional markup in your theme layout - or in a specific page.
Let's suppose you're using the demo theme.
Go to themes/demo/layout/default.htm
Find the head section of your HTML document
Paste your code:
<!--[if lte IE 8]>
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/grids-responsive-old-ie-min.css">
<![endif]-->
<!--[if gt IE 8]><!-->
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/grids-responsive-min.css">
<!--<![endif]-->```
Remember to remove the addCss call from your onRun method to avoid adding the same stylesheet twice.
I use this code to set style in ie8 and ie9, and this is not working.
<!--[if lt IE 8,9]>
<link href="~/Styles/ie8-9.css" type="text/css" rel="stylesheet" />
<![endif]-->
but this code worked properly:
<!--[if lt IE 8,9]>
<style>
body{color:red;}
</style>
<![endif]-->
how can I fix the first case?
ADD<!DOCTYPE html> in the top of your html page, it will work if not
Try this:
*::-ms-backdrop, body{color:red !important;}
lt means "less than". What you're looking for is a conditional statement that handles if the browser is equal to IE 8 or IE 9 so you need to do something like the following:
<!--[if IE 8]>
<link href="~/Styles/ie8-9.css" type="text/css" rel="stylesheet" />
<![endif]-->
<!--[if IE 9]>
<link href="~/Styles/ie8-9.css" type="text/css" rel="stylesheet" />
<![endif]-->
I think the problem is that the path to your ie8-9.css is wrong. Check the console for any errors.
Maybe this article is interesting for you:
slash(/) vs tilde slash (~/) in style sheet path in asp.net
Furthermore, instead of
<!--[if lt IE 8,9]>
I suggest you to write
<!--[if (IE 8)|(IE 9)]>
if you want to use the stylesheet only for IE 8 and 9. I'm not sure if the syntax you are using is correct.
Maybe you also reached the maximum of 31 stylesheets per page in IE 8 and 9.
Don't test with such tools like IETester because they are not 100% equal to the real browsers. Go to modern.ie and download a virtual machine to test your site.
Other ressources:
https://msdn.microsoft.com/en-us/library/ms537512%28v=vs.85%29.aspx
http://de.wikipedia.org/wiki/Conditional_Comments
http://css-tricks.com/how-to-create-an-ie-only-stylesheet/
I am in the process of cross browser testing my site and of course IE is giving me the biggest headache. I know I have to use conditional style sheets but am unsure of where to put these in rails so they are rendered only if IE7 or IE8 for example. I have seen a example on stack overflow but he seems to be using HAML whereas I am not.
Has anyone encountered this issue before and if so what did you do.
Thanks
Assuming you're using the asset pipeline, the only solution I've found for this so far is to not include your stylesheets so that they get compiled into the one file, but instead just include your IE stylesheet(s) separately in the head tag of your layout file as you normally would.
<head>
<!--[if IE 7]>
<link href="ie7.css" rel="stylesheet" type="text/css" />
<![endif]-->
<!--[if IE 8]>
<link href="ie8.css" rel="stylesheet" type="text/css" />
<![endif]-->
</head>
I am creating a template, and I have two different CSS styling sheets. One for IE and one for all other browsers.
I found a solution to target all browsers and IE browsers.
In my header I indicate:
<!--[if !IE]><!--><link rel="stylesheet" href="path/templates/thisTemplate/css/the-pack.css" type="text/css" /><!--<![endif]-->
<!--[if IE]><link rel="stylesheet" href="path/templates/thisTemplate/css/template_ie_lt_9.css" type="text/css" /><!--<![endif]-->
The style sheets work fine. Except that firefox shows the text <!--[if !IE]> at the beginning of the page
Can you provide me with proper alternatives? Or why is this text showing, even though is in the head element, and what do I need to do for this not to show?
Thank you
The end of a positive conditional comment is just <![endif]-->, do not restart a new comment:
<!--[if IE]><link rel="stylesheet"
href="path/templates/thisTemplate/css/template_ie_lt_9.css" type="text/css" />
<![endif]-->
Wikipedia says:
<!--[if gt IE 6]><!-->
This code displays on non-IE browsers and on IE 7 or higher.
<!--<![endif]-->
So, maybe you should change if !IE with if gt IE 9?
More info: http://reference.sitepoint.com/css/conditionalcomments
This should probably be the code:
<!--[if !IE]><link rel="stylesheet" href="path/templates/thisTemplate/css/the-pack.css" type="text/css" /><![endif]-->
<!--[if IE]><link rel="stylesheet" href="path/templates/thisTemplate/css/template_ie_lt_9.css" type="text/css" /><![endif]-->
Greetz,
XpertEase
An old question but more relevant than ever so another possible solution.
<link rel="stylesheet" href="/css/style.css" media="(min-width:0px)">
<!--[if (lt IE 9) & (!IEMobile)]>
<link rel="stylesheet" href="/css/ie.css">
<![endif]-->
You can avoid conditionals by using the media attribute, this is not understood by older browsers so the file does not get loaded.
If you take a look at: http://www.nrgi-raadgivning.dk/erhverv
You can see in the code, that if you are coming from an IE, it should apply a stylesheet...
The IE stylesheet is supposed to set the margin:0 at the dropdown menu ul, but i doesnt?
Any ideas to whats wrong?
From your markup:
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="/Files/System/ie7.css" />
<![endif]-->
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="/Files/System/ie7.css" />
<![endif]-->
However, the linked URL returns a "File not found message":
http://www.nrgi-raadgivning.dk/Files/System/ie7.css
Also, did you mean to link the same stylesheet twice? If so, you should be able to drop the second conditional comment.
Not found is a simple error irrelevant of the content within the CSS. Make sure your path (/Files/System/ie7.css) is right.