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]>
Related
I am trying to target a particular styling for all browsers except for ie9 and below.
I did this to target IE9 and below:
<!--[if lte IE 9]>
<link rel="stylesheet" href="css/ie/ie.min.css">
<![endif]-->
I do not recall what would be the other way to target all other browsers except for IE9. I do recall there is a way to do it like I did to target IE9 and below but I do not recall.
Any help would be appreciated
<!--[if lt IE 9]>
<link rel="stylesheet" href="css/ie/ie.min.css">
<![endif]-->
<!--[if IE 9]>
<link rel="stylesheet" href="css/ie/ie-9.min.css">
<![endif]-->
<!--[if gt IE 9]><!-->
<link rel="stylesheet" href="css/normal.min.css">
<!--<![endif]-->
This method should provide you with separate stylesheets for less than IE 9, IE 9, and more than IE 9 (including all non-IE browsers). The trick for the last conditional is <!--> and <!--<!, which cause Edge and non-IE browsers to interpret the if and endif as separate comments.
To target a single version in particular, use <!--[if IE #]>.
As pointed out by jkdev, since IE 9 is the last version to support conditional comments, the last conditional could have been written:
<!--[if !IE]><!-->
<link rel="stylesheet" href="css/normal.min.css">
<!--<![endif]-->
The result would be the same as the first snippet: only IE 10-11, Edge, and non-IE browsers would get css/normal.min.css. None of the earlier IE versions would get this file since they would evaluate if !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 am trying to make a website look better in IE, so i decided to use conditional comments. So I used this conditional comment to link to the stylesheet.
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="IEstyle.css" />
<![end if]-->
That doesn't work, and it will either use the default stylesheet or it will display a blank page. So then i read somewhere that the comments were like this.
<!--[if !IE]>-->
<link rel="stylesheet" type="text/css" href="IEstyle.css" />
<!--<![endif]-->
So i tried that and it did the exact same thing as the other one but the --> shows up on the page. I am still somewhat new to html, and any help would be nice.
Here is the correct format of the comment:
<!--[if IE ]>
Special instructions for IE here
<![endif]-->
here is a NOT IE comment:
<!--[if !IE ]>
According to the conditional comment this is not IE
<![endif]-->
source: http://www.quirksmode.org/css/condcom.html
edit: just noticed that their 'not' example is wrong. i have corrected it.
You should use like this :
Syntax :
<!--[if IE 8]> = IE8
<!--[if lt IE 8]> = IE7 or below
<!--[if gte IE 8]> = greater than or equal to IE8
<!--[if IE 8]>
<style type="text/css">
/* css for IE 8 */
</style>
<![endif]-->
<!--[if lt IE 8]>
<link href="ie7.css" rel="stylesheet" type="text/css" />
<![endif]-->
reference link 1
reference link 2
Also its always good to declare what versions of IE you want to pull up the conditional sheet, for example if you want IE 9 and lower it would be as stated below.
<!--[if lte IE 9]>
<link rel="stylesheet" type="text/css" href="IEstyle.css" />
<![endif]-->
HTML conditional comments were disabled in IE10. CSS conditional comments can be used to target styling in IE10+.
https://www.mediacurrent.com/blog/pro-tip-how-write-conditional-css-ie10-and-11/
#media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
// IE10+ CSS here
}
When faced with this problem, we went with the <script type="module"> solution. More details here.
We also wanted to access global variables we set using the ES6 code from other ES5 scripts to determine if we wanted to do something different. Obviously an export isn't going to work in this case, but you can assign variables to window.<something> and then access them like you would any other variable.
Only browsers running ES6 and supporting modules will run scripts included with type="module".
IE<9 does not understand data: URIs, so I'm outputting two different stylesheets: one with normal links to images for IE 8 and below, and one with base64-encoded inline images, for other browsers.
<!--[if lte IE 8]>
<link rel="stylesheet" type="text/css" href="/public/themes/url.style.css">
<![endif]-->
<!--[if gt IE 8]>-->
<link rel="stylesheet" type="text/css" href="/public/themes/b64.style.css">
<!--<![endif]-->
Problem: In IE9, I'm seeing a stray --> output on the page. Because it's inside the <head> it appears at the very top of the page. How should I get rid of it?
And I've got it. I did search for valid conditional comments, and found an article telling me to do what I was already doing, but then by chance I came across a by-the-way remark in another answer here which showed me the correct way to do it:
<!--[if lte IE 8]>
<span>This is for IE 7 and below.</span>
<![endif]-->
<!--[if gt IE 8]><!-->
<span>This is for all other browsers (IE 8, and browsers which don't do conditional comments).</span>
<!--<![endif]-->
See the difference: <!--[if gt IE 8]><!--> instead of <!--[if gt 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.