Text would not display on IE only - html

As my title, I have test other browsers firefox, chome, safire, and IE.
Only the IE won't display the text on the menu bar.
The one I was viewing is IE9.
Please help.
Sample as following:
http://joeewu.com/Tester/Lindsay/
Thanks for viewing.

Ah, the joys of cufon ..
First thing you should do is update to the latest version of Cufon.
Then add this code to your header before any Cufon.replace() calls:
<!--[if gte IE 9]>
<script type="text/javascript">
Cufon.set('engine', 'canvas');
</script>
<![endif]-->
<meta http-equiv="X-UA-Compatible" content="IE=8" />

Related

Conditional Comments IE 11 Behavior

I'm trying to build a simple conditional comment to check if the user has anything less than the IE9...
Tried this just to debug the conditions, inside the body:
<!--[if !(IE)]>
<SCRIPT LANGUAGE="Javascript">alert("NOT IE");</SCRIPT>
<![endif]-->
<!--[if lt IE 9]>
<SCRIPT LANGUAGE="Javascript">alert("IE <9");</SCRIPT>
<![endif]-->
<!--[if gte IE 9]>
<SCRIPT LANGUAGE="Javascript">alert("IE >=9");</SCRIPT>
<![endif]-->
When opening the page in IE or Firefox, nothing happen.
Then changed the comments format:
<!--[if !(IE)]>-->
<SCRIPT LANGUAGE="Javascript">alert("NOT IE");</SCRIPT>
<!--<![endif]-->
<!--[if lt IE 9]>-->
<SCRIPT LANGUAGE="Javascript">alert("IE <9");</SCRIPT>
<!--<![endif]-->
<!--[if gte IE 9]>-->
<SCRIPT LANGUAGE="Javascript">alert("IE >=9");</SCRIPT>
<!--<![endif]-->
With this i get all the messages in both browsers?!?!
Then i take a look to the microsoft website, and found this sample:
http://samples.msdn.microsoft.com/workshop/samples/author/misc/ccdh02.htm
It works fine in both browsers directly from the link. So i just copied the source-code and pasted in a new page, and the code in the IE doesnt work (i can't tell if it really works in the Firefox, get the same results), it shows me this messages:
You are not using Internet Explorer.
You are using a downlevel browser.
So what's the problem? I replicated the entire page in a local file and the same thing happens...
I need to understand why this happen, or what i'm doing wrong, so then i can create my comment...
Thanks

Use a specific .js according to the browser

I just want to know why this does not work :
<!--[if IE]>
<script src="scriptForIE.js"></script>
<![endif]-->
<!--[if !IE]>
<script type="text/javascript" src="../../js/jquery-1.11.3.min.js"></script>
<script src="script.js"></script>
<![endif]-->
As you can see, I want to use a specific .js according to the browser. I probably made a mistake, I do not understand.
Thanks !
Ps: i'm using IE >= 8
if your trying to target IE8 use
<!--[if IE 8]>
According to the conditional comment this is IE 8<br />
<![endif]-->
see more here
http://www.quirksmode.org/css/condcom.html
Thx for your answers.
Finally I've adapted my js code to make it suits for IE and Firefox. I've used this :
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
And I've also read that IE => 9 do not recognize anymore the conditions about IE.

Excluding IE 6/7 traffic

I would like to ask if there is any easy way of displaying different page for IE6/7 users who enter a website.
Like a redirect from example.com to example.com/ie7
Unfortunately IE7 doesn't like the website I made so I want to display miniversion of the original website, I have put too much effort into the original to downgrade it now.
Will this line always work? On every version/build of IE7? Or is it more complicated?
I want to be sure that 100% of IE7 traffic gets redirected.
<!--[if IE]><meta http-equiv="refresh" content="0;URL=http://www.example.com/ie7"><![endif]-->
You can use a different CSS on the same page to get a simpler result
<!--[if lt IE 8]>
<link href="/IE7style.css" rel="stylesheet" type="text/css" media="all" />
<![endif]-->
Just overwrite all the styling needed to make IE7 happy
to serve content to IE7 , you need to set the version in conditionnal comments.
<!--[if IE 7 ]><p>I'm IE 7</p><![endif]-->
IE7 and lower :
<!--[if lte IE 7 ]><p>I'm IE 7 at the most.</p><![endif]-->
Where lte means Lighter Than or Equal
The better way is
<!--[if IE 7]>
<script type="text/javascript">
window.location = "http://www.example.com/ie7";
</script>
<![endif]-->
This should be done server side. You can use something like ua-parser to detect ie <=7, and redirect to a new site accordingly.

<!--[if !IE]> is not working as expected in this case

I'm having trouble getting
<!--[if !IE]>
to work. I'm wondering if it is because I have this in my document
<!doctype html>
<!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]-->
<!--[if IE 7]> <html class="ie7 oldie"> <![endif]-->
<!--[if IE 8]> <html class="ie8 oldie"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="">
<!--<![endif]-->
When I add
<!--[if !IE]><!-->
<link type="text/css" rel="stylesheet" href="/stylesheets/no-ie.css" />
<!--<![endif]-->
to my header for some reason, it doesn't work. However, if I add
<!--[if !IE]><!-->
<style>
All my CSS content in here
</style>
<!--<![endif]-->
to the actual HTML page (in the header) it works.
How can I fix it?
When I removed <!-->, I only checked in Internet Explorer (IE) which was working, but now back in Firefox the no-ie.css file had been applied to Firefox too. So I added back in the <!--> and removed the / (and added that into the main template so the CMS wouldn't add it back in) and all is working back in Firefox, but now the style sheet is being applied to IE!
So I tried
<!--[if IE]>
<link type="text/css" rel="stylesheet" href="/stylesheets/no-ie.css">
<![endif]-->
and
<!--[if !IE]> -->
<link type="text/css" rel="stylesheet" href="/stylesheets/no-ie.css">
<!-- <![endif]-->
And that didn't work.
Basically I'm trying to get this page to work: http://css-tricks.com/examples/ResponsiveTables/responsive.php. But move the CSS content into a style sheet. Surely it's got to be simple. What am I missing? I'd rather not use jQuery if I don't have to.
<!--[if !IE]><!--><script src="zepto.min.js"></script><!--<![endif]-->
<!--[if IE]><script src="jquery-1.7.2.min.js"></script><![endif]-->
Note: These conditional comments are
no longer supported from IE 10 onwards.
Browsers other than Internet Explorer treat the conditional statements as comments because they're enclosed inside comment tags.
<!--[if IE]>
Non-Internet Explorer browsers ignore this
<![endif]-->
However, when you're targeting a browser that is Internet Explorer not Internet Explorer, you have to use two comments, one before and one after the code. Internet Explorer will ignore the code between them, whereas other browsers will treat it as normal code. The syntax for targeting non-Internet Explorer browsers is therefore:
<!--[if !IE]-->
Internet Explorer ignores this
<!--[endif]-->
Note: These conditional comments are no longer supported from Internet Explorer 10 onwards.
Reasons for why the Internet Explorer targeting doesn’t work: Internet Explorer 10 and onward no longer support conditional comments. From the Microsoft official website:
Support for conditional comments has been removed in Internet Explorer
10 standards and quirks modes for improved interoperability and
compliance with HTML5.
Please see here for more details: Conditional comments are no longer supported.
If you desperately need to target Internet Explorer, you can use this jQuery code to add an ie class to and then use the .ie class in your CSS to target Internet Explorer browsers.
if ($.browser.msie) {
$("html").addClass("ie");
}
$.browser is not available after jQuery 1.9. If you upgrade to jQuery above 1.9 or you already use it, you can include the jQuery migration script after jQuery so that it adds missing parts:
jQuery Migrate Plugin
Alternatively, please check this question for possible workarounds: browser.msie error after update to jQuery 1.9.1
The Microsoft-recommended syntax for downlevel-revealed conditional “comments” is this:
<![if !IE]>
<link type="text/css" rel="stylesheet" href="/stylesheets/no-ie.css" />
<![endif]>
These aren’t comments, but they work properly.
I use this and it works:
<!--[if !IE]><!--> if it is not IE <!--<![endif]-->
For targeting Internet Explorer users:
<!--[if IE]>
Place content here for users of Internet Explorer.
<![endif]-->
For targeting all others:
<![if !IE]>
Place content here for Users of all other browsers.
<![endif]>
The conditional comments can only be detected by Internet Explorer. All other browsers treat it as normal comments.
To target Internet Explorer 6, Internet Explorer 7, etc. You have to use "greater than equal" or "lesser than (equal)" in the if Statement. Like this:
Greater than or equal:
<!--[if gte IE 7]>
Place content here for users of Internet Explorer 7 or above.
<![endif]-->
Lesser than:
<!--[if lt IE 6]>
Place content here for users of Internet Explorer 5 or lower.
<![endif]-->
Source: mediacollege.com
First of all, the right syntax is:
<!--[if IE 6]>
<link type="text/css" rel="stylesheet" href="/stylesheets/ie6.css" />
<![endif]-->
Try these posts:
Conditional comments
How To Create an IE-Only Stylesheet
Another thing you can do:
Check the browser with jQuery:
if($.browser.msie) { // Do something... }
In this case you can change CSS rules for some elements or add
a new CSS link reference:
Read this: Applying stylesheets dynamically with jQuery
This is for until Internet Explorer 9:
<!--[if IE ]>
<style>
.someclass{
text-align: center;
background: #00ADEF;
color: #FFF;
visibility: hidden; // In case of hiding
}
#someotherclass{
display: block !important;
visibility: visible; // In case of visible
}
</style>
<![endif]-->
This is for after Internet Explorer 9
#media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {Enter your CSS here}
You need to add a space for the <!-- [if !IE] -->. My full CSS block goes as follows, since IE8 is terrible with media queries.
<!-- IE 8 or below -->
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="/Resources/css/master1300.css" />
<![endif]-->
<!-- IE 9 or above -->
<!--[if gte IE 9]>
<link rel="stylesheet" type="text/css" media="(max-width: 100000px) and (min-width:481px)"
href="/Resources/css/master1300.css" />
<link rel="stylesheet" type="text/css" media="(max-width: 480px)"
href="/Resources/css/master480.css" />
<![endif]-->
<!-- Not IE -->
<!-- [if !IE] -->
<link rel="stylesheet" type="text/css" media="(max-width: 100000px) and (min-width:481px)"
href="/Resources/css/master1300.css" />
<link rel="stylesheet" type="text/css" media="(max-width: 480px)"
href="/Resources/css/master480.css" />
<!-- [endif] -->
For the Internet Explorer browser:
<!--[if IE]>
<meta http-equiv="Content-Type" content="text/html; charset=Unicode">
<![endif]-->
For all non-Internet Explorer browsers:
<![if !IE]>
<meta http-equiv="Content-Type" content="text/html; charset=utf8">
<![endif]>
For all Internet Explorer versions greater than Internet Explorer 8 or all non-Internet Explorer browsers:
<!--[if (gt IE 8)|!(IE)]><!--><script src="/_JS/library/jquery-2.1.1.min.js"></script><!--<![endif]-->
A conditional comment is a comment that starts with <!--[if IE]> which couldn't be read by any browser except Internet Explorer.
From 2011, conditional comments aren’t supported starting form Internet Explorer 10 as announced by Microsoft in that time: Conditional comments are no longer supported
The only option to use the conditional comments is to request Internet Explorer to run your site as Internet Explorer 9 which supports the conditional comments.
You can write your own CSS and/or JavaScript files for Internet Explorer only and other browsers won't load or execute it.
This code snippet shows how to make Internet Explorer 10 or Internet Explorer 11 run ie-only.css and ie-only.js which contains custom codes to solve Internet Explorer compatibility issues.
<html>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9">
<!--[if IE]>
<meta http-equiv="Content-Type" content="text/html; charset=Unicode">
<link rel="stylesheet" type="text/css" href='/css/ie-only.css' />
<script src="/js/ie-only.js"></script>
<![endif]-->
</html>
This works for me across all Internet Explorer versions greater than version 6 (Internet Explorer 7, Internet Explorer 8, Internet Explorer 9, Internet Explorer 10, etc., Chrome 3 up to what it is now, and Firefox version 3 up to what it is now):
// Test if running in Internet Explorer or not
function isIE () {
var myNav = navigator.userAgent.toLowerCase();
return (myNav.indexOf('msie') != -1 || myNav.indexOf('trident') != -1) ? true : false;
}
In case you are working with IE 10 or above, as mentioned in http://tanalin.com/en/articles/ie-version-js/ the conditional comments are no longer supported.
You might refer to https://gist.github.com/jasongaylord/5733469 as an alternative method, which the Trident version is checked as well from the navigator.userAgent. This also verified in case the browser is working in compatibility mode.
Thank you Fernando68. I used this:
function isIE () {
var myNav = navigator.userAgent.toLowerCase();
return (myNav.indexOf('msie') != -1 || myNav.indexOf('trident') != -1) ? true : false;
}
if(isIE()){
$.getScript('js/script.min.js', function() {
alert('Load was performed.');
});
}
I am using this JavaScript code to detect an Internet Explorer browser:
if (navigator.appVersion.toUpperCase().indexOf("MSIE") != -1 ||
navigator.appVersion.toUpperCase().indexOf("TRIDENT") != -1 ||
navigator.appVersion.toUpperCase().indexOf("EDGE") != -1)
{
$("#ie-warning").css("display", "block");
}

Why don't my links show up in IE 9?

Why don't my links show up in IE 9?
http://uk2canadapensiontransfers.com/index.php
If you don't want to view the website you can go directly to the style sheet at...
http://uk2canadapensiontransfers.com/css/style.css
The problem doesn't occur in any of the other IEs.
Cufon doesn't work in IE9 for some reason. Downloading the more recent version 'should' solve your problem but personally I would use a Google Font instead.
Alternatively you can try either of these methods:
<!--[if gte IE 9]>
<script type="text/javascript">
Cufon.set('engine', 'canvas');
</script>
<![endif]-->
Force IE to render as an older version
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<meta http-equiv="X-UA-Compatible" content="IE=7" />
Look right at the bottom of your stylesheet to find and remove
<!--[if IE 9]>
a{color:black;}
<![endif]-->