HTML if not IE 8 or lower - html

I tried using this syntax for IE8 or lower
<!--[if !lte IE 8]>
//my code here
<![endif]-->
But it appears to comment out my code...is this code correct?

I'm not sure if this is valid syntax, but it does work in my case, so I'll post it here:
<!--[if gte IE 9]><!-->
<canvas width="200" height="200"></canvas>
<!--<![endif]-->
This will target IE>=9 and other browsers, and IE<9 will ignore the content.

With this condition the script will be loaded on IE10+ and any other browser that's not IE.
<!--[if (gt IE 8)|!(IE)]><!-->
<!-- put script here -->
<!--<![endif]-->

Related

Else in html conditional for ie

I want to load a .css file if the browser is ie8 or lower and other file if the browser is greater than ie8 or other browser (chrome, safari, etc).
I've read that ther isn't an else in html conditional. And the answers here always says to use something like this:
<!--[if lt IE 9]>
This is less then IE9
<![endif]-->
<!--[if gt IE 8]> <!-- -->
this is all browsers: IE9 or higher, firefox, chrome, etc.
<!-- <![endif]-->
The problem with this is that I don't want to do that only if the browser is greater than 8, I want to do iy if the browser is other than ie also.
How can I do it?
Thanks!
The <!-- --> will ensure that other browsers see the content between it and the next <!--. Notice how the syntax highlighter on Stack Overflow does not highlight the content as an HTML comment — that's how you can tell.
A more common variation that's somewhat shorter:
<!--[if gt IE 8]><!-->
this is all browsers: IE9 or higher, firefox, chrome, etc.
<!--<![endif]-->
Just put your styles before IE conditionals
<link rel="stylesheet" type="text/css" href="your_styles.css">
<!--[if lt IE 9]>
This is less then IE9
<![endif]-->
<!--[if gt IE 8]>
this is for: IE9 or higher
<![endif]-->

How do I replace an id tag inside a div if seen in IE

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 :)

IE7 conditional - remove script

all I simply want to do is; if the browser is less than internet explorer 8 find and remove $(document).foundation();
<!--[if IE 8]>
//code here
<![endif]-->
Simply deleting a plugin like that, e.g.
<!--[if lt IE 8]><!-->
<script>
delete $.fn.foundation;
</script>
<!--<![endif]-->
Will probably cause all sorts of problems and is generally a bad idea - see here for why.
Instead, just load the foundation() plugin/related scripts if the browser is IE8+ or a different browser:
<!--[if gte IE 8]><!-->
<script src="/js/foundation.min.js"></script>
// Other related scripts etc...
<!--<![endif]-->

If statements for browser support

Are If statements available for html because I want this text to pop up when someone is using internet explorer <p>You are using Internet Explorer we don't support this browser</p>
And for firefox </p>Your browser is supported</p>
Is this possible?
HERE IS MY CODE:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>My title</title>
<p class="accent">
<!--[if IE]>
According to the conditional comment this is IE<br />
<![endif]-->
<!--[if IE 6]>
According to the conditional comment this is IE 6<br />
<![endif]-->
<!--[if IE 7]>
According to the conditional comment this is IE 7<br />
<![endif]-->
<!--[if IE 8]>
According to the conditional comment this is IE 8<br />
<![endif]-->
<!--[if IE 9]>
According to the conditional comment this is IE 9<br />
<![endif]-->
<!--[if gte IE 8]>
According to the conditional comment this is IE 8 or higher<br />
<![endif]-->
<!--[if lt IE 9]>
According to the conditional comment this is IE lower than 9<br />
<![endif]-->
<!--[if lte IE 7]>
According to the conditional comment this is IE lower or equal to 7<br />
<![endif]-->
<!--[if gt IE 6]>
According to the conditional comment this is IE greater than 6<br />
<![endif]-->
<!--[if !IE]> -->
According to the conditional comment this is <comment>not</comment> IE<br />
<!-- <![endif]-->
</p>
</head>
<body>
MY code here
</body>
</html>
There is no HTML if statement, but Internet Explorer has something called conditional comments. So you could say
<!--[if IE]>
<p>You are using Internet Explorer we don't support this browser</p>
<![endif]-->
<!--[if !IE]> -->
</p>Your browser is supported</p>
<!-- <![endif]-->
Although, the second part covers everything else, not only Firefox browser.
Take a look at jQuery.browser: http://api.jquery.com/jQuery.browser/
The $.browser property provides
information about the web browser that
is accessing the page, as reported by
the browser itself. It contains flags
for each of the four most prevalent
browser classes (Internet Explorer,
Mozilla, Webkit, and Opera) as well as
version information.
Available flags are:
webkit (as of jQuery 1.4) safari
(deprecated) opera msie mozilla This
property is available immediately. It
is therefore safe to use it to
determine whether or not to call
$(document).ready(). The $.browser
property is deprecated in jQuery 1.3,
and its functionality may be moved to
a team-supported plugin in a future
release of jQuery.
Because $.browser uses
navigator.userAgent to determine the
platform, it is vulnerable to spoofing
by the user or misrepresentation by
the browser itself. It is always best
to avoid browser-specific code
entirely where possible. The $.support
property is available for detection of
support for particular features rather
than relying on $.browser.

Is different html page content to different browsers possible?

I have a fullscreen/background slideshow that my client loves that just utterly fails in Internet Explorer 8 and below. I think trying to fix that is way beyond my capabilities right now so I would just like to switch it out for another IE safe background slideshow (less good looking but its something at least) if the browser is IE8 or below.
However, I know that you can switch stylesheets by using
<!--[if IE]>
etc, but the stylesheet relies on some basic html markup within a div (example below) that I do not want to show on the page to internet explorer ...
<ul class="cb-slideshow">
<li><span>Image 01</span><div><h3>Lorem Ipsum Dolor</h3></div></li>
<li><span>Image 02</span><div><h3>Lorem Ipsum Dolor</h3></div></li>
<li><span>Image 03</span><div><h3>Lorem Ipsum Dolor</h3></div></li>
</ul>
how do I remove this if the user is using IE8 or below? I am using a mac so running many tests in IE is not really possible so I am not being lazy in asking.
Do I just have to have different pages or something?
Thanks in advance
If you use conditional comments to set a class on the <html> tag you can avoid having a separate stylesheet:
<!--[if lt IE 7]> <body class="ie ie6 lte9 lte8 lte7"> <![endif]-->
<!--[if IE 7]> <body class="ie ie7 lte9 lte8 lte7"> <![endif]-->
<!--[if IE 8]> <body class="ie ie8 lte9 lte8"> <![endif]-->
<!--[if IE 9]> <body class="ie ie9 lte9"> <![endif]-->
<!--[if gt IE 9]> <body class="ie"> <![endif]-->
<!--[if !IE]><!--> <body> <!--<![endif]-->
in your styles just hide the ul : .lte9 .cb-slideshow { display: none;}
see:
http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/
and
http://misteroneill.com/journal/improved-internet-explorer-targeting-through-body-classes/
To expand on one of the comments, you can put conditional comments anywhere, so you can do this:
<!--[if lt IE9]>// IE-specific slideshow HTML here. <![endif]-->
<!--[if gte IE 9]><!-->// Standard slideshow HTML here (for IE9+ and non-IE browsers) <!--<![endif]-->
Try this:
<!--[if !LT IE 9]><!-->
<p>Not IE 8 and below and all other browsers</p>
<!--<![endif]-->
<!--[if lt IE 9]>
<p>IE 8 and below </p>
<![endif]-->
The first block outputs to all browsers except IE8 and below.
The second block outputs to IE8 and below.
You can define different layout inside <div id="browserid" style="display:none">...</div>-Tags where browserid is one of IE, FF, etc. That makes them invisible by default.
Then you define a javscript function, that is called at onpageLoad and that evaluates the navigator.userAgent property. That contains the client browser name. Depending on that value you change the corresponding 's display-style.