<!--[if lt IE 7]> <html class="ie ie6 lte9 lte8 lte7"> <![endif]-->
<!--[if IE 7]> <html class="ie ie7 lte9 lte8 lte7"> <![endif]-->
<!--[if IE 8]> <html class="ie ie8 lte9 lte8"> <![endif]-->
<!--[if IE 9]> <html class="ie ie9 lte9"> <![endif]-->
<!--[if gt IE 9]> <html> <![endif]-->
<!--[if !IE]><!--> <html> <!--<![endif]-->
The above code, does not seem to work in the least bit.
The only IE version that my website(The Randy) seems to work in is IE9. I thought it was working because of the conditional statements I've input above, but it works in IE9 without those statements as well. If I look at it in IE8 and IE7 I get a broken looking website. Any help would be most appreciated.
Conditional comments are not supported in IE 10 and are a bad idea anyway, especially since standards have been set.
You should ALWAYS use feature detection instead of browser detection.
EDIT: Reading the Console helps too:
HTML1513: Extra "<html>" tag found. Only one "<html>" tag should exist per document.
therandy.tk, line 9 character 20
HTML1503: Unexpected start tag.
therandy.tk, line 12 character 1
HTML1512: Unmatched end tag.
therandy.tk, line 245 character 208
HTML1514: Extra "<body>" tag found. Only one "<body>" tag should exist per document.
therandy.tk, line 247 character 1
HTML1519: Invalid nesting. An "<a>" tag should not be placed within another "<a>".
therandy.tk, line 364 character 97
In your markup, you have a <script> tag before your <html> tag opens. That's not valid code, and IE probably doesn't like this. Move that <script> so that it's in your document <head> instead.
Related
I currently have the following html prefix namespaces
<html lang="en" dir="ltr" prefix="content: http://purl.org/rss/1.0/modules/content/
dc: http://purl.org/dc/terms/ foaf: http://xmlns.com/foaf/0.1/
og: http://ogp.me/ns# rdfs: http://www.w3.org/2000/01/rdf-schema#
schema: http://schema.org/ sioc: http://rdfs.org/sioc/ns#
sioct: http://rdfs.org/sioc/types# skos: http://www.w3.org/2004/02/skos/core#
xsd: http://www.w3.org/2001/XMLSchema# ">
I was reading something and came across this:
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]-->
Here are my questions:
1./ Does adding this to my html web page interfere/collide with the current prefix namespace I have?
2./ For the situation when it says if (gte IE 9) why is there a closed comment <!--> before the html declaration and <!-- after the declaration
3./ What can i do with this sort of declaration?
You can only have one <html> tag, but you could add the attributes from your first example to the <html> tag in the second. What are you trying to achieve?
Your second example contains conditional comments. They are only supported by older versions of Internet Explorer. Other browsers will treat them as normal HTML comments - i.e. they will ignore them. The last line of the example closes the comment before the HTML tag so that all non IE browsers will still see the <html lang="en"> tag. If it was instead written as
<!--[if (gte IE 9)|!(IE)]><html lang="en"><![endif]-->
the <html> tag would be inside the comment and would therefore be ignored by all browsers.
The purpose of the code you posted is to output an IE-version specific class to the <html> tag. It would allow you to write CSS declarations for targetting specific IE versions, e.g.:
body {
background-color: white;
}
.ie7 body {
background-color: red;
}
This would make the page background white for everyone except users of IE7, for whom it would be red.
In practice these sorts of solutions aren't used as commonly these days, unless you have a pressing need to support IE versions that Microsoft themselves no longer support.
I am trying to understand that what kind of CSS inside the html class="ie.".
Is there any CSS file for these statements, if they are then what are the CSS
elements being used in these style sheets.
<!--[if lt IE 7 ]> <html class="ie6"><![endif]-->
<!--[if IE 7 ]> <html class="ie7"><![endif]-->
<!--[if IE 8 ]> <html class="ie8"><![endif]-->
<!--[if IE 9 ]> <html class="ie9"><![endif]-->
What you are looking at are conditional comments. They are a Microsoft standard they baked into older versions of IE since the rendering "quirks" could vary so much from version to version. Any non Internet Explorer browser will render those as comments and go about their merry way. However, older versions of IE will so those comments and render them as content if the version matches. For instance, IE6 would see your markup and render like this:
<html class="ie6">
<!--[if IE 7 ]> <html class="ie7"><![endif]-->
<!--[if IE 8 ]> <html class="ie8"><![endif]-->
<!--[if IE 9 ]> <html class="ie9"><![endif]-->
What this allows you to do now is write CSS that targets Internet Explorer 6 specifically -- any selector that is prefixed with .ie6 will only be applied to the IE6 browser. Sad that it is necessary, but useful to have.
Please note that in IE10 MS felt that there browsers were now sufficiently quirk-free and standards compliant to no longer necessitate supporting any conditional comments, so they won't work IE9+.
Remember that conditional comments will not work within your stylesheets. Instead, you can use conditional comments inside your HTML. First I would apply different CSS classes / ID's to elements so you can then target with CSS.
<!--[if IE]>
<div id="ie_wrapper" class="ie">
<![endif]-->
<!--[if !IE]>
<div id="ie_wrapper">
<![endif]-->
I have this html line
I am trying to make it so that when IE reads that line, it changes the "listHr" id to "listhrIE".
I have tried this, in an attempt to switch out the line altogeather, but no luck:
<hr id="listHr"></hr> <!--[if IE]><id="listHrIE"></hr><![endif]-->
I am sure I am doing this wrong. What is the correct way of doing this?
Thanks.
IE tags have a "not IE" component.
<!--[if IE]>
<hr id="listHrIE"></hr>
<![endif]-->
<![if !IE]>
<hr id="listHr"></hr>
<![endif]>
However I'd offer a better way to do it would be to just override the style of listHr when IE is detected
As #Paulie_D pointed out: conditional tags are deprecated and won't work for IE 10 and above. You can use a special meta tag:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9">
to force them to work however this is not recommended. See here: http://msdn.microsoft.com/en-us/library/ie/hh801214(v=vs.85).aspx
try these:
<!--[if !IE]><hr id="listHr"></hr><!-->
<!--[if IE]><hr id="listHrIE"></hr><!-->
if you want set this id for some version of IE, you can do this:
greater and equal IE8:
<!--[if gte IE 8]><!-->
less and equal IE8:
<!--[if lte IE 8]><!-->
equal IE8:
<!--[if IE 8]><!-->
You can use IE only conditional tags to detect IE.
Just like:
<!--[if IE ]>
<p>Welcome to Internet Explorer 8.</p>
<![endif]-->
So, In your case you need two things to change ID.
1) Display IE only ID
2) Hide non-IE ID
To apply IE only ID you need following conditional tag code
<!--[if IE ]>
<div id="listHrIE"></hr>
<![endif]-->
To hide non-IE ID you need to add display:none
<!--[if IE ]>
<div id="listHrIE"></div>
<div id="listHr" style="display:none"></div>
<![endif]-->
Now you can style your IE Only ID in way you want and it will only replace listHr when IE detects.
Update: To target IE 10 Use following jQuery: Before using add jQuery Migrate
<script src="http://code.jquery.com/jquery-migrate-1.0.0.js"></script> This line
to your page<head>
Then add
if ($.browser.msie && $.browser.version == 10) {
$("html").addClass("ie10");
}
I hope this helps :)
Can I use if lt IE9 in conjunction with if IE 8, in this manner:
<!--[if lt IE 9]><script src="html5shiv.js"></script><![endif]-->
<!--[if IE 8 ]> <html class="ie8"> <![endif]-->
I'm asking since the second condition is contained in the first one, maybe this could cause some glitch in one of the browsers?
Yes it should work fine, and the order doesn't matter, ie will parse all the rules and execute any that matches
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en-us" class="no-js"> <!--<![endif]-->
I've never come across something like this, but it looks a bit odd.. I'm used to seeing it more in this format (the previous line in Columnal):
<!--[if IE 9 ]> <html lang="en-us" class="no-js ie9"> <![endif]-->
Firstly, what does the first code sample do? And do I need to worry about the format of it? Thanks
The first basically says: if the browser is greater than IE 9 or not an IE browser, that snipper of code will be used.
I have never seen such formatting before though.
For downlevel-hidden one should use <!--[if expression]> HTML <![endif]-->
For downlevel-revealed this one: <![if expression]> HTML <![endif]>
For more on this, check Microsoft's 'About'.