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
Related
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
Now that Internet explorer no longer supports Condition Tags like <![if IE]><![endif]> how do you guys handle custom code only for IE? I need to insert custom CSS that I want to work only for IE. I couldn’t find any simple solution for this.
OPTION 1 - For IE10
<script>
if(Function('/*#cc_on return document.documentMode===10#*/')()){
document.documentElement.className+=' ie10';
}
</script>
The CSS to style it:
.ie10 .yourclass {
/* IE10-only styles go here */
}
OPTION 2 - For IE10 (The original suggestion)
Javascript:
var doc = document.documentElement;
doc.setAttribute('data-useragent', navigator.userAgent);
HTML:
<html data-useragent="Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0)">
CSS styling would be (if any needed):
html[data-useragent*='MSIE 10.0'] .yourclass {
color: blue;
}
Source: css-tricks
For IE 6 to 9:
<!--[if IE]>
IE<br />
<![endif]-->
<!--[if IE 6]>
IE 6<br />
<![endif]-->
<!--[if IE 7]>
IE 7<br />
<![endif]-->
<!--[if IE 8]>
IE 8<br />
<![endif]-->
<!--[if IE 9]>
IE 9<br />
<![endif]-->
<!--[if gte IE 8]>
IE 8 or higher<br />
<![endif]-->
<!--[if lt IE 9]>
IE lower than 9<br />
<![endif]-->
<!--[if lte IE 7]>
IE lower or equal to 7<br />
<![endif]-->
<!--[if gt IE 6]>
IE greater than 6<br />
<![endif]-->
<!--[if !IE]> -->
Not IE 5-9<br />
<!-- <![endif]-->
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]-->
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 want to know, when using conditional comments, what is the correct way (pay attention to the closing div tags)
This way, with one closing div for both conditional divs
<!--[if IE]>
<div id="IEdiv">
<![endif]-->
<!--[if !IE]><!-->
<div id="AllOtherDiv">
<!--<![endif]-->
<div>The Content</div>
</div>
OR
This way, with a closing div for each conditional div, and repeating the SAME html
<!--[if IE]>
<div id="IEdiv">
<div>The Content</div>
</div>
<![endif]-->
<!--[if !IE]><!-->
<div id="AllOtherDiv">
<!--<![endif]-->
<div>The Content</div>
</div>
NOTE: You might wonder why I don't just use conditional stylesheets if the inner HTML is the same, but I use inline styles on the conditional divs(I have to) and the inline style for IE is different (necessary because IE sucks so bad with it's css support...
)
Thank you
Neither is technically right or wrong, but repeating the contents seems quite a waste if it's going to be the same across browsers. Just conditionalize the start tag as in your first example. HTML comments are designed to allow such a technique.
HTML5 Boilerplate happens to do this with the <html> start tag, by the way, except with classes and slightly different conditional comments, but you can use any attribute you want as long as you target browsers correctly:
<!--[if lt IE 7]> <html lang="en-us" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html lang="en-us" class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html lang="en-us" class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en-us" class="no-js"> <!--<![endif]-->
<!--[if IE]>
<div id="IEdiv">
<![endif]-->
<!--[if !IE]><!-->
<div id="AllOtherDiv">
<!--<![endif]-->
<div>The Content</div>
</div>
is the right way to do it because you see this on many websites:
<!--[if IE9]>
<html class="ie9">
<![endif]-->
<!--[if IE8]>
<html class="ie8">
<![endif]-->
<!--[if lte IE7]>
<html class="ie7">
<![endif]-->
<!--[if !IE]><!-->
<html>
<!--<![endif]-->
content....
</html>