Cant Seem to make this work in ie8
I just want my html5 to work but nothing seems to appear do i need to add more css?
<!-- IE Conditional Comments -->
<!--[if lte IE 8]>
<script>
document.createElement('header');
document.createElement('nav');
document.createElement('footer');
<style type="text/css">
menu, nav, footer { display:block; }
</style>
code.google.com/p/html5shiv
Insert minified distribution shiv in element (after or before your CSS):
<!--[if lt IE 9]>
<script src="dist/html5shiv.js"></script>
<![endif]-->
Hope that helps.
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]-->
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'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]-->
Assuming the following code:
<div class="content">
<div style="background:url(swoosh.jpg) no-repeat; background-size:100% 100%;" class="top">
<div style="height:42px; align:center;" id="logo">
My goal is to make the div with the background swoosh.jpg be a simple div with class=top
I have tried getting the conditional to work myself, however for some reason (syntax?) it is not working properly.
The following is what I have tried
<div class="content">
<!--[if !IE]>
<div class="top">
<![endif]-->
<!--[if IE]>
<div style="background:url(swoosh.jpg) no-repeat; background-size:100% 100%;" class="top">
<![endif]-->
I should mention that I cannot use anything other than inline CSS for this application - and have no access to the header.
I think this is how to do what you want but as previously stated, it's not the best way of doing things if you have other options (tested in IE9 - IE10 doesn't work with conditional statements):
<![if !IE]>
<div class="top">
<![endif]>
<!--[if IE]>
<div style="background:url(swoosh.jpg) no-repeat; background-size:100% 100%;" class="top">
<![endif]-->
http://jsfiddle.net/APFZh/2/
IE 10 targeting requires a little JS:
<![if !IE]><!--<script>
if (/*#cc_on!#*/false) {
document.documentElement.className+=' ie10';
}
</script><!--<![endif]-->
This appends a class of “ie10” to the html element but you could write whatever you want to the document
http://www.impressivewebs.com/ie10-css-hacks/
Try adding
<!--[if lt IE 7]><html class="ie6"><![endif]-->
<!--[if IE 7]><html class="ie7"><![endif]-->
<!--[if IE 8]><html class="ie8"><![endif]-->
<!--[if gt IE 8]><!--><html><!--<![endif]-->
To the top of your HTML doc. Then use CSS like this
.content {
color:red;
}
.ie6 .content {
color:blue;
}
.ie7 .content {
color:green;
}
This way you can keep all of your CSS in one file and your IE classes next to the non IE classes.
Check out this doc from Paul Irish
It would be better practice to just have the div with class="top" but set different styles for it in a separate IE stylesheet as using inline CSS is not recommended.
Put this in the HEAD of your page:
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie.css">
<![endif]-->
As to it not working I'd suggesrt making sure you have a valid DOCTYPE at the top of your page as IE is very fussy about that.
An update if somebody still reaches this page, wondering why the ie targeting doesnt work in recent IE browsers. IE 10 and onward no longer support conditional comments. From the MS official website:
Support for conditional comments has been removed in Internet Explorer
10 standards and quirks modes for improved interoperability and
compliance with HTML5.
Please see here for more details: http://msdn.microsoft.com/en-us/library/ie/hh801214(v=vs.85).aspx
If you desperately need to target ie, you can use this jquery code to add a ie class to and then use .ie class in your css to target ie browsers.
if ($.browser.msie) {
$("html").addClass("ie");
}
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.