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
Related
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'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
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 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.
Im trying to use conditional stylesheets to target different versions of IE.
I have the following
<!--[if IE 7]>
<link href="_includes/css/ie7.css" rel="stylesheet">
<![endif]-->
<!--[if gte IE 7]>
<link href="_includes/css/ie7.css" rel="stylesheet">
<![endif]-->
<!--[if lte IE 7]>
<link href="_includes/css/ie6.css" rel="stylesheet">
<![endif]-->
Which works okay, but in IE8 it seems to pickup ie6.css and I cant for the life of me figure out why. Has anybody any idea?
Thanks
Ive also used
<!--[if IE 8]>
with no luck
lte means less than or equal to, therefore you probably want:
<!--[if lte IE 6]>
<link href="_includes/css/ie6.css" rel="stylesheet">
<![endif]-->
I'd guess it's possible IE 8 is identifying as IE 7 because it's in compatibility mode. Check your DOCTYPE is correct.
Ahhh I figured it out!
<!--[if IE 6]>