I have a Bootstrap ASP.NET MVC 4 project and look perfect across all browsers, except for IE 8 on Windows Server 2003.
When viewing the website the text <!--[if lt IE 9 !IE]><![endif]--><!--[if lt IE 9 !IE]><!--<![endif]--><!--[if lt IE 9 !IE]><![endif]--> actually appears on the page, so the browser is ignoring it.
HTML
<!--[if lt IE 9 !IE]>
#Scripts.Render("~/bundles/jqueryold")
<![endif]-->
<!--[if gte IE 9 !IE]><!-->
#Scripts.Render("~/bundles/jquery")
<!--<![endif]-->
#Scripts.Render("~/bundles/bootstrap")
#Scripts.Render("~/bundles/freelance")
<!-- IE8 support for HTML5 elements and media queries -->
<!--[if lt IE 9 !IE]>
#Scripts.Render("~/bundles/ie9")
<![endif]-->
Any help resolving this issue would be much appreciated :-)
The problem is that !IE cancels out your conditional statement.
!IE means "target any other browser EXCEPT IE"
Just get rid of it
<!--[if lt IE 9]>
#Scripts.Render("~/bundles/jqueryold")
<![endif]-->
<!--[if gte IE 9]><!-->
#Scripts.Render("~/bundles/jquery")
<!--<![endif]-->
#Scripts.Render("~/bundles/bootstrap")
#Scripts.Render("~/bundles/freelance")
<!-- IE8 support for HTML5 elements and media queries -->
<!--[if lt IE 9]>
#Scripts.Render("~/bundles/ie9")
<![endif]-->
Check here for more info.
Related
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]-->
Is there any difference between conditional comments <!--[if lt IE 9]> and <!--[if lte IE 8]>
The first one of course means less than IE9.
The second one means less than or equal IE8.
Are they equivalent or not?
As if Internet Explorer 8.X does not exist, YES they are equivalent !
if there is a version IE 8.x it will be deny by lte IE8 but accept by lt IE9
but as Ksv3n say, there is no IE8.x, so on this case they are equivalent
I want to use display A for IE great than 7 or other browsers, and display B for IE 7 and lower.
One way is
<!--[if !IE]>
A
<![endif]-->
<!--[if gte IE 8]>
A
<![endif]-->
<!--[if lt IE 8]>
B
<![endif]-->
But I don't want to write A twice in a page since A is very long and it seems unwise to duplicate it.
How can I achieve this by HTML only?
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.
I'm having a strange issue.
I am using Internet explorer 9 and just changing the browser mode to IE 7 or IE 8 etc ...
My problem is that I've added:
<!--[if lt IE 7]>
<link type=\"text/css\" rel=\"stylesheet\" href=\"/styles/ie7.css\" />
<![endif]-->
but it's not changing to the conditional css file when in IE9 's IE7 browser mode...
Is this normal?
if lt IE 7 will match IE6 (or lower).
To match IE7, use lte (less than or equal)
#SLaks is right about the error you are receiving.
I would like to add to that by showing you a better way to target IE:
<!-- 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!