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>
Related
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 have nearly finished the site i am working on, however IE doesn't accept some of my animations.
I know i can specify a IE only sheet:
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="path/to/stylesheet.css"></link>
<![endif]-->
However IE still runs the other style sheet, Does anyone know a way to force IE to ignore a css style sheet?
regards,
Jimy
Since CSS stands for cascading style sheet the idea for these conditional sheets is to override the "normal css"
<link rel="stylesheet" type="text/css" href="path/to/normalstylesheet.css"></link>
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="path/to/iestylesheet.css"></link>
<!--[endif]-->
Everything in the former would be over wrote by the latter stylesheet. If you have another specific reason to omit something though you can always use this.
<!--[if !IE]-->
<link rel="stylesheet" type="text/css" href="path/to/notiestylesheet.css"></link>
<!--[endif]-->
You can use this,
<!--[if !IE]-->
IE ignores this
<!--[endif]-->
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.
I have a master page to apply to all my pages, the master page is doing its work however, it seems that is unable to resolve the CSS file address for pages I have in child folders.
I have a set of folders like this:
RootContent
UsersContent
AdminContent
Since the master page and css files are on the Root content, when the master page tries to locate the css file inside UsersContent or AdminContent it cannot find it.
I'm using JavaScript to detect the browser and set the css properly for most browsers and another file for IE6 since is required in here, any ideas?.
<script type="text/javascript">
if((BrowserDetect.browser.toString() == "Firefox") && (BrowserDetect.version.toString() == "3.5"))
{
document.write('<link rel="Stylesheet" href="<%=ResolveUrl("~/StyleSheet.css") %>" type="text/css" />');
}
else if((BrowserDetect.browser.toString() == "Explorer") && (BrowserDetect.version.toString() == "6"))
{
document.write('<link rel="Stylesheet" href="~/StylesheetIE6.css" type="text/css" />');
}
</script>
In the code above I tried <% ResolveUrl("~/StyleSheet.css") %> but didn't work, it works while in the same folder but not on the childs.
EDIT: Just to clarify my CSS file is on my Root Folder not on the childs
A simplest way Add App_Themes folder under your web project. Add a theme and under that theme add all css files include their respective image directories.
In your web.config, add
It will automatically get added to the every page.
Note:- In this case all css will get applied. If you have browser specific css, then this is not the way.
[SEE UPDATED]
a CSS file like "iespecific.css" to be loaded by IE 6 and not other browsers, use the following code in the HEAD section of your web page:
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="iespecific.css" />
<![endif]-->
Likewise, for any version of IE 5 (including 5.0, 5.01, 5.5, etc), use the following:
<!--[if IE 5]>
<link rel="stylesheet" type="text/css" href="iespecific.css" />
<![endif]-->
to detect the release build of IE 5.5, you will need the following code:
<!--[if IE 5.5000]>
<link rel="stylesheet" type="text/css" href="iespecific.css" />
<![endif]-->
For example, to test for all versions of IE greater than or equal to version 6, you can use
<!--[if gte IE 6]>
<link rel="stylesheet" type="text/css" href="iespecific.css" />
<![endif]-->
The above code examples work because a normal browser sees the entire block as HTML comments since they are enclosed within "". IE 5 or above will however attempt to parse the block to see if it has instructions specific to it.
You can also exclude a certain style sheet using this method. For example, to exclude the CSS file "not-ie.css" from IE 6, use:
<![if !(IE 6)]>
<link rel="stylesheet" type="text/css" href="not-ie.css" />
<![endif]>
Notice the operator "!" immediately preceding "IE". This is the NOT operator, causing the statements following to be used only if the expression "IE 6" is not matched by the browser.
Again, the above code works because a normal browser will interpret "" and "<[endif]>" as HTML tags that it does not recognise, and ignore them. This code, however, will not validate as correct in a HTML validator, since it does not use valid HTML tags.
Note that you can also test for IE without specifying a version number. For example, the following loads the style sheet only if the browser is not IE 5 or above:
<![if !IE]>
<link rel="stylesheet" type="text/css" href="not-ie.css" />
<![endif]>
Microsoft's documentation for this non-standard feature can be found at http://msdn2.microsoft.com/en-us/library/ms537512.aspx
Since the documentation does not specify that these features apply only to the Windows versions of IE, I assume that they also apply to the Macintosh version. I'm not able to verify this though.
I have always used ResolveClientUrl for this purpose. Can you try that instead of ResolveUrl? And here's a post discussing the difference.
Have you tried adding runat="server" to the link tag? Worked for me.
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.