I've been doing a bit of reading around this subject, and I can't seem to find an answer that specifically answers this question.
Using this code as an example:
<!--[if lte IE 7]>
<link rel="stylesheet" type="text/css" href="ie-style.css" />
<![endif]-->
<link rel="stylesheet" type="text/css" href="style.css" />
Would IE6 open and run it-style.css and style.css, and if not, why not? Also, does the order in which you place conditional and non-conditional stylesheets matter?
Yes it will open both.
Whatever style sheet is placed last has higher priority.
If this attribute was in ie-style.css
body {
background:#000000; //black
}
and this attribute was in style.css
body {
background:#FF0000; //red
}
and this is what the order of style sheets were in your <head>
<!--[if lte IE 7]>
<link rel="stylesheet" type="text/css" href="ie-style.css" />
<![endif]-->
<link rel="stylesheet" type="text/css" href="style.css" />
then the body will be red even if you were on IE.
Related
Some of my CSS elements don't work in IE8. So I am using a conditional style sheet to set display:none for them; however, this affects everyone using IE browsers no matter the version. I'm using the following code:
<!DOCTYPE html>
<html>
<head>
<title>website title</title>
<meta name="description" content="web description">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Stylesheets -->
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
<script src="bootstrap/js/bootstrap.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<!--[if lte IE 8]><link rel="stylesheet" href="css/ie8.css"><![endif]-->
<!--[if lt IE 9]>
<script src="bootstrap/js/html5shiv.js"></script>
<script src="bootstrap/js/respond.min.js"></script>
<![endif]-->
</head>
Where am I going wrong?
My understanding is you want to target all the old IEs including IE8, so lte IE 8 (lower/equal) would work. You can also merge that lt IE 9 into the above one actually, like this:
<!--[if lte IE 8]>
<script src="bootstrap/js/html5shiv.js"></script>
<script src="bootstrap/js/respond.min.js"></script>
<link rel="stylesheet" href="css/ie8.css">
<![endif]-->
For debugging, you can try to add something like body {10px solid red !important;} into your ie8.css and to see if that applies to the correct browsers.
[if lte IE 8] means that the stylesheet is added if version of IE is less than 8. You need the [if IE 8] conditional.
I am experiencing a problem when trying to load a style sheet specifically for IE. I have a css file for IE7 and one for IE8. Now the browser on my desktop is IE8 and I am using developer tools to switch between IE7 and IE8. In developer, I can see that the conditionals are not being recognised because if I make an amendment in one of the the css files, no changes take place even after cache removal. Is there something simple I am missing here?
I have also tried before all other css files and after and included an X-UA line.Hope someone can help. Thanks
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<!--[if IE 7]>
<link href="/domain/users/css/jmenu/css/ie7_jmenu.css" rel="stylesheet" type="text/css" media="screen">
<link href="/domain/users/css/ie7_css_forms.css" rel="stylesheet" type="text/css" media="screen">
<link href="/domain/users/css/ie7_colmenu.css" rel="stylesheet" type="text/css" media="screen">
<p style="color: blue; font-size:18px;">You are using IE7</p>
<![endif]-->
<!--[if IE 8]>
<link href="/domain/users/css/jmenu/css/ie8_jmenu.css" rel="stylesheet" type="text/css" media="screen">
<link href="/domain/users/css/ie8_css_forms.css" rel="stylesheet" type="text/css" media="screen">
<link href="/domain/users/css/ie8_colmenu.css" rel="stylesheet" type="text/css" media="screen">
<p style="color: blue; font-size:18px;">You are using IE8</p>
<![endif]-->
I'd like to detect if the user uses IE or another browser. So just after
<!doctype html>
but before
<html lang="pl-PL">
I put this code:
<![if !IE]>
<link rel="stylesheet" media="screen" type="text/css" href="css/style.css" />
<![endif]>
<!--[if IE]>
<link rel="stylesheet" media="screen" type="text/css" href="css/style-ie.css" />
<![endif]-->
But it doesn't seem to work. What am I doing wrong?
The <link> tag should be a child of the <head> tag.
<html lang="pl-PL">
<head>
<![if !IE]>
<link rel="stylesheet" media="screen" type="text/css" href="css/style.css" />
<![endif]>
I have this code with conditional comments for IE7 and IE8:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<link href="css/basic.css" rel="stylesheet" type="text/css" />
<link href="css/ui.css" rel="stylesheet" type="text/css" />
<!--[if lte IE 8]>
<link href="css/ie8fix.css" rel="stylesheet" type="text/css" />
<![endif]-->
<!--[if lte IE 7]>
<link href="css/ie7fix.css" rel="stylesheet" type="text/css" />
<![endif]-->
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
Stylesheets in conditional comments are not working. I tested this in IE Tester.
Actually, Microsost doesnt support Conditional comments any more. I was kind of stuck myself for a while, so I wrote an an article about it:
http://www.yofiel.com/writing/essays/microsoft-s-exit-strategy
IETester is based on an unsupported hack that has incorrect behaviors in some cases. Have you tried testing in a real browser? Microsoft provides the VMs for free at http://modern.ie.
I have these HTML conditional codes for IE 7 yet they don't appear to be working.
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="/css/stylesie.css" />
<![endif]-->
<link rel="stylesheet" type="text/css" href="/css/styles.css" />
is there something wrong with them or something I am missing?
If you adjust your rules for IE7 in stylesie.css, then it should be loaded after your original css file:
<link rel="stylesheet" type="text/css" href="/css/styles.css" />
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="/css/stylesie.css" />
<![endif]-->
Rules for a selector with the same specificity will overwrite old ones, so IE7 will parse stylesie.css first and overwrite those rules with the ones from styles.css.
Basic example of this behavior:
div, div.red{
color:red;
}
div{
color:blue;
}
This will result in a blue color in all <div>, except the one tagged with the class red.
From the given information I can only try to guess: for me it looks that "/css/styles.css" overwrites some CSS properties of "/css/stylesie.css" since included after. So I'd try to include it before:
<link rel="stylesheet" type="text/css" href="/css/styles.css" />
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="/css/stylesie.css" />
<![endif]-->
I guess the position you inserted it is the issue. Your page first loads IE-definitions, then adds your CSS supposed to be the "default" one for all browsers. Now if there are definitions for the same elements like in your IE-Version, that will simply override those.