I have the following stylesheet inside the HEAD piece of my website:
<!--[if !IE]-->
<link rel="stylesheet" href="theStyles/defaultStyle.css" type="text/css" charset="utf-8" />
<!--[endif]-->
<!--[if IE]>
<link rel="stylesheet" href="theStyles/defaultStyle_ie.css" type="text/css" charset="utf-8" />
<![endif]-->
I am running IE version 10 but for some reason it is reading the non IE stylesheet. Any idea how to fix it? Do I have to be specific in the IE condition?
I looked in the developer tool, and only the NON IE version has been loaded...
Ended up using this:
<script type="text/javascript">
if (window.clipboardData)
alert("You are using IE!");
else
alert("NON IE");
</script>
Per Microsoft:
As of Internet Explorer 10, conditional comments are no longer
supported by standards mode. Use feature detection to provide
effective fallback strategies for website features that aren't
supported by the browser.
and
Support for conditional comments has been removed in Internet Explorer
10 standards and quirks modes for improved interoperability and
compliance with HTML5. This means that Conditional Comments are now
treated as regular comments, just like in other browsers. This change
can impact pages written exclusively for Windows Internet Explorer or
pages that use browser sniffing to alter their behavior in Internet
Explorer.
Only allow the IE style sheet within the conditional comments for IE. Your regular style sheet does not need the conditional comments. It should read as follows:
<link rel="stylesheet" href="theStyles/defaultStyle.css" type="text/css" charset="utf-8" />
<!--[if IE]>
<link rel="stylesheet" href="theStyles/defaultStyle_ie.css" type="text/css" charset="utf-8" />
<![endif]-->
Related
I'm trying to use conditional comments to load webcomponents polymer polyfill on ie11 and webcomponente-lite polyfill on ohter browser so I have:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bower_components/roboto-condensed/css/roboto-condensed.css">
<!--[if IE]>
<script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
<![endif]-->
<!--[if !IE]><!-->
<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<!--<![endif]-->
The issue is that webcomponents-lite.min.js is always loaded, event in IE11
Any suggestion?
IE 11 does not support conditional comments.
Conditional comments are no longer supported
Impact Applies to Internet Explorer 10 and later. Affects IE10
Standards mode and later, including interoperable quirks mode. Support
for conditional comments has been removed in Internet Explorer 10
standards and quirks modes for improved interoperability and
compliance with HTML5. This means that Conditional Comments are now
treated as regular comments, just like in other browsers. This change
can impact pages written exclusively for Windows Internet Explorer or
pages that use browser sniffing to alter their behavior in Internet
Explorer.
You'll need to try another way to target IE11 specifically.
Searching around SO brought me to this answer, which uses feature detection to determine whether or not to load Polymer's polyfills.
Executing my below code in IE browser and found look& feel issue in rendering the content based on the included font-awesome-ie7.min.css. Tried this code in IE8 browser mode with document mode (IE8 &IE7 standards)
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="../assets/img/favicon.ico">
<meta http-equiv="X-UA-Compatible" content="IE=8">
<!--[if IE 7]>
<link rel="stylesheet" href="../assets/css/font-awesome-ie7.min.css">
<![endif]-->
Not rendering properly.
Looks like you have included a stylesheet for IE7 and trying to view output on IE8 while css will not work on this. To get output on IE8 you should try writing like this...
<!--[if IE 8]>
<![endif]-->
Hope this helps!
You need to tell us what version of IE you're using to test. IE 11 dropped support for conditional comments so it won't matter what you have as a conditional in there.
I would use lte (less than or equal to) IE 8 if you want to load for 7 as well.
You should load the regular font awesome css asset before the conditional statement. Load order is important.
So I'm seeing something quite weird. I'm running Windows 8.1/IE11, not sure if that is important or not.
I've inserted the following html comments. One is pulled straight from the HTML5 boilerplate so I'm sure that's right at least.
When I open up the dev tools, I can see the comments in the DOM in IE11 and with the emulator to IE10. As soon as I go to IE9 or below in the emulator with document mode and user string. All of the conditional IE HTML comments you see below and just the conditional IE comments are for some reason no where to be seen.
Has anyone ever seen anything like that? Have any clue why it might happen? I've searched exhaustively to no avail.
<!DOCTYPE html>
<html>
<head>
<title>#ViewBag.PlatformModel.PlatformTitle </title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="~/Scripts/html5shiv.js"></script>
<!--[if lt IE 8]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<!--[if lte IE 7]><link rel="stylesheet" type="text/css" href="~/content/platform/css/ie78.css"/><![endif]-->
<!--[if lt IE 9]>#Styles.Render("~/Content/platform/css/IE78.css")<![endif]-->
<!--// kendo common, kendo theme-->
#Styles.Render("~/Content/kendo-common-styles")
#Styles.Render("~/Content/kendo-theme-styles")
<!--// platform -->
#Styles.Render("~/Content/platform-styles")
<!--// page styles -->
#RenderSection("styles", required: false)
</head>
<body>
<!--[if lt IE 8]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
You might want to update Windows and install the latest patches. The F12 tools in IE11 at RTM shipped with a bug* where the emulated document modes wouldn't respect conditional comments. That's since been fixed.
* http://connect.microsoft.com/IE/feedback/details/806767/conditional-comments-do-not-work-when-emulating-document-modes-via-f12-developer-tools
UPDATE: I couldn't tell you what changed to save my life, but suddenly it's working... Thank you everyone for your help.
I have a default CSS style sheet, an IE specific stylesheet, and a IE7 specific stylesheet.
On Windows 7 in IE8 the IE sheet is loaded, and in IE8 Compatibility mode the IE7 sheet is loaded.
On Windows XP in IE7, neither stylesheet is loaded, thus breaking (or rather, not fixing) my layout. This brings up a couple of questions...
Does IE7 on XP use different language to call browser specific style sheets? Was there a different standard for calling sheets when it was made?
This is what I have currently:
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="css/ieprocessstyle.css" />
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="css/ie7processstyle.css">
<![endif]-->
Could it be caused by some bug or error on the machine I'm using? Could different machines with XP and IE7 act differently?
Hopefully someone can shed some light on this for me. The site is for a large corporation and they forced me to go live already so I'm just waiting to get a call from the Big Bad Angry Voodoo Daddy....
There is no special syntax for IE7, here is a conditional set that works in 6, 7 and 8:
<!--[if lte IE 8]><link href="/_ui/css/ie8.css" rel="stylesheet" type="text/css" media="all" /><![endif]-->
<!--[if lte IE 7]><link href="/_ui/css/ie7.css" rel="stylesheet" type="text/css" media="all" /><![endif]-->
<!--[if lte IE 6]><link href="/_ui/css/ie6.css" rel="stylesheet" type="text/css" media="all" /><![endif]-->
Here is a code reference for IE conditionals:
http://www.quirksmode.org/css/condcom.html
So first should load in all IE versions and second should, in addition to first, be loaded for IE 7 right ?
Nothing wrong with the syntax.. (you could correctly close the tag at the end in the IE7 version />), and nothing different in syntax between versions.. the problem must lie elsewhere..
I'm redesigning my Tumblr blog and I use CSS3 Pie to add some eye-candy to Internet Explorer. The problem with this is that CSS3 Pie uses Internet Explorer specific files (.htc) that can only be served from the same domain as the HTML file, which is something I can't do on Tumblr.
The thing is that without that file the website breaks on IE6 & IE7 (I'm using HTML5 syntax and apparently these browsers don't really like it even with some help from Modernizr).
So, do you know any ways of adding such files from another domain than the one that serves the HTML? No matter how hacky it is.
I would suggest using conditional comments for IE to gracefully alert users their browsers are not supported, or to reformat the content for IE users.
<!--[if IE 6]><link rel="stylesheet" type="text/css" href="includes/styleIE6.css" /><![endif]-->
<!--[if IE 7]><link rel="stylesheet" type="text/css" href="includes/styleIE7.css" /><![endif]-->
<!--[if IE 8]><link rel="stylesheet" type="text/css" href="includes/styleIE8.css" /><![endif]-->
Another alternative, which I'm guessing is easier than the ".htc" hack you are suggesting. Is to use a basic java-script redirect. If the user is using IE (less than IE9) redirect them to a simplified, IE only, web page.