I'm using the conditional statement here to add i.e. browsers css styles
<!DOCTYPE html>
<!--[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]-->
If I test in emulators this conditional statement doesn't seem to work, the html tag doesn't have the 'lt-ie9' class.
If I test in products like browserstack the conditional statement seems to work and I can see the text thats is shown with the class .lt-ie9
Is the conditional html tag correct? Should I not trust the emulators
<!DOCTYPE html>
<!--[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]-->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<!--jQuery-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<!--css-->
<style type="text/css">
.test{
color: red;
display: none;
font-size: 2em;
}
.lt-ie9 .test{
display: block;
}
</style>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<title>Title of the document</title>
</head>
<body>
<div class="test">IE8</div>
</body>
</html>
Without knowing the emulators in question, there's no way for us to know. Your best course of action in debugging is to copy down that code into the body and replace the html tags with something visible:
<!--[if lt IE 7]> IE, Less than 7<![endif]-->
<!--[if IE 7]> IE 7 <![endif]-->
<!--[if IE 8]> IE 8 <![endif]-->
<!--[if gt IE 8]><!--> IE 9+ or not-IE <!--<![endif]-->
Related
I saw there is a method to load the HTML sample in VS Code.
But I don't know what is the shortcut of it.
! + Enter would do the work for you.
type ! at the beginning and hit enter it will generate the basic HTML Structure i do it all the time
press CTRL+! and then press Tab or press ctrl + space
Another approach is to install extension
https://github.com/sidthesloth92/vsc_html5_boilerplate
it will generate this code:
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="">
</head>
<body>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<script src="" async defer></script>
</body>
</html>
If you are using windows
simply check the language if it is HTML or not and afterward the same step shift+!..
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
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 am trying to validate this HTML document in http://validator.w3.org/#validate_by_input but I am getting the following errors:
Line 3, Column 47: Stray start tag html.
<!--[if IE 7]><!--><html lang="en" class="ie7"><!--<![endif]-->
Line 4, Column 47: Stray start tag html.
<!--[if IE 8]><!--><html lang="en" class="ie8"><!--<![endif]-->
Line 5, Column 47: Stray start tag html.
<!--[if IE 9]><!--><html lang="en" class="ie9"><!--<![endif]-->
Line 6, Column 46: Stray start tag html.
<!--[if (gt IE 9)|!(IE)]><!--><html lang="en"><!--<![endif]-->
This is the HTML I am inputting:
<!DOCTYPE html>
<html lang="en-US">
<!--[if IE 7]><!--><html lang="en" class="ie7"><!--<![endif]-->
<!--[if IE 8]><!--><html lang="en" class="ie8"><!--<![endif]-->
<!--[if IE 9]><!--><html lang="en" class="ie9"><!--<![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html lang="en"><!--<![endif]-->
<head>
<title>Test</title>
</head>
<body>
</body>
</html>
Any ideas where I'm going wrong?
Correct conditional comments:
<!--[if IE 7]><html lang="en" class="ie7"><![endif]-->
<!--[if IE 8]><html lang="en" class="ie8"><![endif]-->
<!--[if IE 9]><html lang="en" class="ie9"><![endif]-->
<!--[if (gt IE 9)|!(IE)]><html lang="en"><![endif]-->
<!--[if !IE]><html lang="en-US"><![endif]-->
You don't close them. That's all and you define 2 html tags now.
You start with a html-tag that's always present and then you add html-tags depending on version of IE so you might very well end up with multiple html-tags.
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
Use this file and then start tag...
I am trying to target a class for IE. However, since the boilerplate template has changed this no longer works..
.myclass {
//do something
}
.ie7 .myclass {
///do something
}
This is what's in the new header of the boilerplate template.
<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
We do not recommend you target IE9 as it has all the marking of a modern browser, which is why we do not have IE9 specific conditional class. If you still would like to, you can use:
<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if IE 9]> <html class="no-js lt-ie10" lang="en"> <![endif]-->
<!--[if gt IE 9]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
Note that IE10 will not recognize conditional comments.
Yak Boilerplate! Anyway:
.lt-ie9.lt-ie8 .myclass {}
should do what you want.
EDIT
Sorry misread your question since you put IE7 in example. If you want to IE9 you can just do:
.myclass {}