I've added the following to get IE8 and IE9 to use my ie8.css but doesn't seem to be using it at all when I emulate being on IE8 or IE9. (Don't have them installed so I am using IE11 developer tools to do this as normal.)
<!--[if !IE]><!-->
<link rel="stylesheet" href="<?php HTTP_HOST; ?>/Styles/global-en.css" type="text/css" media="screen" />
<!--<![endif]-->
<!--[if lt IE 9]>
<link rel="stylesheet" href="<?php HTTP_HOST; ?>/Styles/ie8.css" type="text/css" media="screen" />
<![endif]-->
<!--[if lte IE 8]>
<link rel="stylesheet" href="<?php HTTP_HOST; ?>/Styles/ie8.css" type="text/css" media="screen" />
<![endif]-->
Live URL: http://bit.ly/1r4dvw5
The emulator of IE11 is abit screwed up, check this post:
http://www.impressivewebs.com/ie11-emulation-conditional-comments/
What i would suggest is to install something like IEtester:
http://www.my-debugbar.com/wiki/IETester/HomePage
Or for a better experience install VM's via http://www.modern.ie
Related
How do you use conditional comments to target
Internet Explorer only
Certain IE versions
Certain IE versions and all other browsers
No IE, just other browsers
in a way that validates? (validator.w3.org/)
I tested these and they're valid HTML.
IMPORTANT: Only IE 5 through 9 support conditional comments.
<!-- 1. IE 5-9 only: -->
<!--<![if IE]>
<link rel="stylesheet" type="text/css" href="ie-5-through-9.css">
<![endif]>-->
<!-- 2. Some IE versions -->
<!--<![if gte IE 8]>
<link rel="stylesheet" type="text/css" href="ie-8-and-9.css">
<![endif]>-->
<!-- 3. Some IE versions, plus all non-IE browsers -->
<!--[if gte IE 8]>-->
<link rel="stylesheet" type="text/css" href="ie-gte8-and-non-ie.css">
<!--<![endif]-->
<!-- 4. All browsers except IE 5-9 -->
<!--[if !IE]>-->
<link rel="stylesheet" type="text/css" href="modern-ie-and-non-ie.css">
<!--<![endif]-->
Is there a way to only prevent IE 9 from loading a stylesheet or script?
I just found a way to prevent all IE versions from doing something but not a certain version:
<!--[if !IE]><!-->
<link rel="stylesheet" href="not-ie.css" />
<script src="not-ie.js"></script>
<!--<![endif]-->
Sure, just specify the version:
<!--[if !(IE 9)]><!-->
<link rel="stylesheet" href="not-ie-9.css" />
<script src="not-ie-9.js"></script>
<!--<![endif]-->
Note that what you currently have will result in IE10 and later loading your resources like other browsers, as those newer versions do not process conditional comments.
I have some trouble with IE. I have set the following comment in my pages in the head section:
<!--[if lte IE 7]>
<link rel="stylesheet" type="text/css" href="ie7-and-down.css" />
<![endif]-->
But IE doesn't detect that css file. Does anyone known the problem?
Thank you.
Casper
You're targetting <= IE7 currently.
Preface:
lte - less than, or equal to
gte - greater than, or equal to
This will target <= IE8
<!--[if lte IE 8]>
<link rel="stylesheet" type="text/css" href="ie7-and-down.css" />
<![endif]-->
Which is equivalent to:
[if (gte IE 1) & (lte IE 8)]>
I've been trying the following to target my mobile lumia 920 in my layout.
<!--[if IEMobile]>
<link rel="stylesheet" href="/Content/windowsPhone.css"/>
<![endif]-->
<!--[if IEMobile 8]>
<link rel="stylesheet" href="/Content/windowsPhone.css"/>
<![endif]-->
<!--[if IEMobile 7]>
<link rel="stylesheet" href="/Content/windowsPhone.css"/>
<![endif]-->
<!--[if IE]>
<link rel="stylesheet" href="/Content/windowsPhone.css"/>
<![endif]-->
None of these works. Any other ideas?
It does not work because this code works only in Windows Phone 7 and Lumia 920 is Windows Phone 8. Read more here
I would suggest using JS to detect the browser.
browserUA = navigator.userAgent.toLowerCase();
if (browserUA.search('windows phone os 7') > -1)
//Load WP 7 CSS file
I have an asp.net-mvc3 website.
I created all the layout using css. The layout is exactly how I want it on firefox and Chrome, but on internet explorer it is in a big mess.
So now i am trying to fix it.
But the problem is that I want to fix it without messing it on firefox or chrome.
Do I have to restart from scratch and rebuild the layout? or is there a way to specify a certain layout for a specific browser.
Something like this:
If Internet Explorer then use this css sheet or style, else use what I allready have.
use these(put it on the head):
Target ALL VERSIONS of IE
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->
Target everything EXCEPT IE
<!--[if !IE]><!-->
<link rel="stylesheet" type="text/css" href="not-ie.css" />
<!--<![endif]-->
Target IE 7 ONLY
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="ie7.css">
<![endif]-->
Target IE 6 ONLY
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]-->
Target IE 5 ONLY
<!--[if IE 5]>
<link rel="stylesheet" type="text/css" href="ie5.css" />
<![endif]-->
Target IE 5.5 ONLY
<!--[if IE 5.5000]>
<link rel="stylesheet" type="text/css" href="ie55.css" />
<![endif]-->
Target IE 6 and LOWER
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="ie6-and-down.css" />
<![endif]-->
<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="ie6-and-down.css" />
<![endif]-->
Target IE 7 and LOWER
<!--[if lt IE 8]>
<link rel="stylesheet" type="text/css" href="ie7-and-down.css" />
<![endif]-->
<!--[if lte IE 7]>
<link rel="stylesheet" type="text/css" href="ie7-and-down.css" />
<![endif]-->
Target IE 8 and LOWER
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="ie8-and-down.css" />
<![endif]-->
<!--[if lte IE 8]>
<link rel="stylesheet" type="text/css" href="ie8-and-down.css" />
<![endif]-->
Target IE 6 and HIGHER
<!--[if gt IE 5.5]>
<link rel="stylesheet" type="text/css" href="ie6-and-up.css" />
<![endif]-->
<!--[if gte IE 6]>
<link rel="stylesheet" type="text/css" href="ie6-and-up.css" />
<![endif]-->
Target IE 7 and HIGHER
<!--[if gt IE 6]>
<link rel="stylesheet" type="text/css" href="ie7-and-up.css" />
<![endif]-->
<!--[if gte IE 7]>
<link rel="stylesheet" type="text/css" href="ie7-and-up.css" />
<![endif]-->
Target IE 8 and HIGHER
<!--[if gt IE 7]>
<link rel="stylesheet" type="text/css" href="ie8-and-up.css" />
<![endif]-->
<!--[if gte IE 8]>
<link rel="stylesheet" type="text/css" href="ie8-and-up.css" />
<![endif]-->
You have to identify the problem(s) (which likely have something to do with using Quirks mode) and address them.
There isn't a magic bullet that solves all IE woes, and providing a completely different stylesheet is usually much more work then you need to do.
You can provide code specifically for IE using conditional comments, but in the vast majority of cases this should be applied with a light touch.
You need conditional IE stylesheets.
Create your stylesheets that you want only IE to use, and put them in the document head inside IE specific code. For example:
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->
This will call the all-ie-only.css stylesheet on any version of IE, but you can change the code to be specific versions, or even a group of versions, e.g. "less than IE9"
This is a great resource that has all the info - http://css-tricks.com/how-to-create-an-ie-only-stylesheet/ (Dan has copied and pasted exact content in this answer for you)
I've managed to be able to get very consistent design across IE, Safari, Opera and Firefox by using a complete reset.css stylesheet.
The reset.css will "0 out" the differing preset standards for each browser and then load your actual stylesheet on a clean slate.
Only after testing the reset.css and stylesheet-name.css do I create browser specific hacks. This is the best practice for consistent display across multiple browsers.
The following link is a good example: http://meyerweb.com/eric/tools/css/reset/
What you're asking for is an <!--[if IE]> tag. This website goes through it in detail.
However, in the future you can build a site to work cross platform without the need for If IE tags. It all depends on your CSS and markup.