I'm currently running this code. I also have an external stylesheet that applies all my styles of the page correctly but i'm running in this issue at the moment.
When i call .ie9 as a class in my external stylesheet and want to apply a gradient style to it, it isn't running my code in the Internet Explorer emulation.
However when i run the code not in the .ie9 class the code actually works so i made some mistake somewhere. Perhaps you might know what the issue is here.
HTML Code:
<!--[if IE 8]> <html lang="en" class="ie8"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9"> <![endif]-->
<!--[if !IE]><!--><html lang="nl-NL"> <!--![endif]-->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
CSS Code:
.ie9 {
.section-example{
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#80c9db', EndColorStr='#30aac8');
}
}
The problem was actually different. Internet Explorer 11 emulator does not load conditional html statements for some reason.
May it works for greater than ie9:-
<!--[if gte IE 9]>
<link rel="stylesheet" type="text/css" href="ie9-and-up.css" />
<![endif]-->
or
<!--[if lt IE 9]>
<link href="<?php bloginfo( 'template_url' ); ?>/css/ie9.css" rel="stylesheet" type="text/css" />
<![endif]-->
Related
I have an exercise question which is:
Write a snippet of CSS that will display a paragraph in blue in older browsers, red in newer browsers, green in IE6 and black in IE7
I'm beginning to think this is a trick question as after much googling, the only conditional browser code I can find goes in html like this:
<!--[if IE]>
According to the conditional comment this is IE<br />
<![endif]-->
Although this didn't actually work for me as vis studio just processes this statement as a comment. As far as I can tell it's not possible to write a css snippet to do this, am I right?
I really should not be giving you the answer to a quiz... but
<!--[if IE]>
<div class="ie">
<![endif]-->
<!--[if IE 6]>
<div class="ie6">
<![endif]-->
<!--[if IE 7]>
<div class="ie7">
<![endif]-->
<!--[if IE 8]>
<div class="ie8">
<![endif]-->
<!--[if IE 9]>
<div class="ie9">
<![endif]-->
<!--[if gte IE 8]>
<div class="ie8plus">
<![endif]-->
<!--[if lt IE 9]>
<div class="ie9lower">
<![endif]-->
<!--[if !IE]> -->
<div class="not-ie">
<!-- <![endif]-->
</div>
I'll leave the CSS rules to you ;)
Use different css files for any version IE
<!--[if !IE]--><link href="styles.css" rel="stylesheet" media="all" /><!--[endif]-->
<!--[if IE 6]><link href="ie6.css" rel="stylesheet" media="all" /><![endif]-->
<!--[if IE 7]><link href="ie7.css" rel="stylesheet" media="all" /><![endif]-->
<!--[if IE 8]><link href="ie8.css" rel="stylesheet" media="all" /><![endif]-->
Internet Explorer Version Checks are not working in Internet Explorer 8 on Some Computers. Kindly Help.
DocType used are
<!DOCTYPE HTML>
<!--[if lte IE 8]>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<![endif]-->
Browser Check used are
<!--[if lte IE 8]>
<script src="scripts/js/html5.js"></script>
<![endif]-->
<!--[if lte IE 8]>
<link rel="stylesheet" type="text/css" media="all" href="scripts/css/structie8.css" />
<![endif]-->
<!--[if lte IE 8]>
<script type="text/javascript">
j$(document).ready(function(){
j$(".table tr:odd").css("background-color","#d4d4d4");
j$(".table tr:even").css("background-color","#e2e2e2");
});
</script>
<![endif]-->
Thanks
With HTML comments, I am trying to do something like the following -
<!-- [if lte IE 8] --> //if browser is IE8 or less display the following
<div>IE8</div>
<!-- [endif] -->
<!-- [if ANY OTHER BROSWER] --> //any other browser do this
<div>Any other browser</div>
<!-- [endif] -->
I can't seem to find a combination that works? How can this be done?
Reference
<!--[if IE 8]>
According to the conditional comment this is IE 8<br />
<![endif]-->
<!--[if lt IE 9]>
According to the conditional comment this is IE lower than 9<br />
<![endif]-->
<!--[if gt IE 7]>
According to the conditional comment this is IE greater than 7<br />
<![endif]-->
For example,
<html>
<head>
<link rel="stylesheet" href="my-styles.css">
<!--[if IE 8]>
<link rel="stylesheet" href="my-ie8-only-styles.css">
<![endif]-->
</head>
<body>
<p>Hello World!</p>
</body>
</html>
Or you could use it to only render certain html markup...
....
<!--[if IE 8]>
<div id="ie8Only">IE8 Only</div>
<![endif]-->
....
I know it's a bit old question, but here's my solution
<!--[if lt IE 9]><!-->
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/html5shiv.js"></script>
<!--<![endif]-->
<!--[if (gte IE 9) | (!IE)]><!-->
<script src="~/Scripts/jquery-2.1.4.min.js"></script>
<!--<![endif]-->
i am using the following cc's, i have a few issues with :before layout for gt-ie8 that i want to target
<!--[if IE 8]> <html class='ie ie8 lt-e9 lt-e8'> <![endif]-->
<!--[if IE 9]> <html class='ie ie9'> <![endif]-->
<!--[if gt IE 9]> <html class='ie gt-ie9'> <![endif]-->
<!--[if !IE]><!--> <html class='not-ie'> <!--<![endif]-->
my problem is that FF and chrome both pick up the .gt-ie9 class. I have been using html5bp and i am trying configuration from browserhacks.com
I have a div that isn't lining up correctly in Chrome, IE and FF. Chrome needs a padding-left:40px; while IE and FF do not. I've been playing with if for a few hours and I know I'm missing something simple.
This is what I've been trying:
<!--[if !IE]>-->
<link href="non-ie.css" rel="stylesheet" type="text/css">
<!--<![endif]-->
I've also tried in the normal style.css:
<!--[if !IE]-->
#lower .expo {padding-left:40px;}
<!-- <![endif]-->
or
#lower .expo {width:400px; padding-top:40px; float:left;}
I also tried this:
#lower .expo {width:400px; padding-left:40px; padding-top:40px; float:left;}
<!--[if gt IE 6]>
#lower .expo {width:400px; padding-top:40px; float:left;}
<!-- <![endif]-->
Interestingly if I do this:
<!--[if gt IE 6]>
#lower .expo {width:400px; padding-top:40px; float:left;}
<![endif]-->
#lower .expo {width:400px; padding-left:40px; padding-top:40px; float:left;}
IE displays correct but not FF or Chrome. Its driving me crazy. I must be missing something simple but I've been looking at it too long.
Just for the sake of your actual error, it lies in how you are doing the comments. It should be:
<!--[if !IE]><!-->
<link href="non-ie.css" rel="stylesheet" type="text/css">
<!--<![endif]-->
For a better way than that, here's what I use:
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="ie6" lang="en"><![endif]-->
<!--[if IE 7]> <html class="ie7" lang="en"><![endif]-->
<!--[if IE 8]> <html class="ie8" lang="en"><![endif]-->
<!--[if IE 9]> <html class="ie9" lang="en"><![endif]-->
<!--[if IE 10]> <html class="ie10" lang="en"><![endif]-->
<!--[if !IE]><!--><html class="non-ie" lang="en"><!--<![endif]-->
The benefit of doing it this way is that you get to keep the best practice of only using 1 stylesheet. You simply preface your target with the corresponding IE class you want to hack.
For example: .ie6 #target-id
For a more in depth explanation, check out Paul Irish's article:
Conditional stylesheets vs CSS hacks? Answer: Neither!
UPDATE:
2012.01.17: Here is the current iteration that we have in the HTML5 Boilerplate. We actually tried to reduce it down to just a single
.oldIE class for IE ≤8 (to use with safe css hacks), but that didn’t
fly. Anyway, our current version..
<!--[if lt IE 7]><html class="lt-ie9 lt-ie8 lt-ie7"><![endif]-->
<!--[if IE 7]><html class="lt-ie9 lt-ie8"><![endif]-->
<!--[if IE 8]><html class="lt-ie9"><![endif]-->
<!--[if gt IE 8]><!--><html class=""><!--<![endif]-->
Try downloading this javascript file. http://firststepdesign.org/browserselect.js Then link it in your html.
<script src="browserselect.js" type="text/javascript"></script>
After that go to your css and use these to select specific css for different browsers.
only internet explorer will detect this.
.ie .example {
background-color: yellow
}
Only firefox will detect this.
.gecko .example {
background-color: gray
}
Only Safari and Chrome will detect this.
.webkit .example {
background-color: black
}
Hope this helps if you need to more comment.