<!--[if IE]> doesn't work - javascript

I have some svg code that works in all browsers except IE. if i add this, it works in IE:
<canvas width="1900" height="1325" style="display:block;width:100%;visibility:hidden;"></canvas>
but it then messes up some stuff in all the other browsers. thus i tried to add this condition:
<!--[if IE]><canvas width="1900" height="1325" style="display:block;width:100%;visibility:hidden;"></canvas><![endif]-->
but then again it works in all browsers except IE, thus i think IE is treating it as a comment.
i can't figure out what's wrong, any help is much appreciated!

<!--[if ????]> only works in IE up to IE9.
IE10/11 treat it like it should be treated, a comment
to verify, open the developer tools in IE11
set IE to emulate "IE9" - and you'll see the conditional markup will be visible
switch back to 10/11 mode, and the content will again disappear
Important As of Internet Explorer 10, conditional comments are no longer supported by standards mode. Use feature detection to provide effective fallback strategies for website features that aren't supported by the browser. source

Related

Prevent using IE8 with JAVASCRIPT

Is there a way in JAVASCRIPT (not jquery) to stop navigating a webpage in IE8 ?
( if i use jquery, a error appears : SCRIPT5009: jquery is not defined.).
In a company is still using IE8, They want to left behind little by little, so they need to send an ALERT when the user start navigating an specific webpage.
Note: Works perfectly in IE9 and Chrome
Regards
You can put scripts inside tags like this. These tags say run these scripts on versions of Internet Explorer that are below 9. So, you could write a script that posts a notice on your page about using outdated browsers.
<head>
<!--[if lt IE 9]>
<script src="outdated-browser-notification.js"></script>
<![endif]-->
</head>

Display div only in IE

I'm making a website at the moment and for some reason the z-index of a see through overlay is not working in internet explorer (it works in everything else), therefore I want to display a warning message that the website does not support internet explorer, how can I make a div with the class "Warning" show up only in internet explorer?
I am happy to this via any method (HTML, CSS, Jquery etc) as long as it either resolves the z-index issue or makes the warning div show.
Update: I had a friend of mine test my website and the conditional comments don't work in IE11, I want the div to be displayed in all versions of IE.
You can use a conditional statement to show the div:
<!--[if IE]>
<div class="warning">...</div>
<![endif]-->
This will work for all versions of IE, if you want to target specific versions, see here for more info.
EDIT: As GSerg has pointed out, this will only work for < IE11. For later versions of IE, you may have to rely on some JS like in this Q&A: Browser detection in JavaScript?
Html5 Boilerplate recommends this solution (checkout this link for more details):
<!--[if lt IE 8]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
Wrap your html in a conditional like so:
<!--[if lt IE 7]>[html here]<![endif]-->
the lt means 'less than'. You can target various version of IE by using lt, gt (greater than), lte (less than or equal to) and gte (greater than or equal to).

Images not loading on IE10, 9 and 8 .load bug

We are building a website for a client but cant seem to find the bug which causes the images under the slider not to load.
There are some posts going around about the .load function not properly working in IE.
Does anyone have an idea?
http://mbx.web-flight.nl/
Greatly appreciated.
You're problem is Internet Explorer Quirks Mode. You must define a page header in such a way that IE will load the site in standards mode. Switch IE to standards mode manually and you will see the images load.
Try the following on the page to declare DOCTYPE.
<!DOCTYPE html>
Or try to Force IE to use the latest render mode
<meta http-equiv="X-UA-Compatible" content="IE=edge">
Learn more about Quirks mode here: http://en.wikipedia.org/wiki/Quirks_mode
Ultimately the BEST solution is to address the problem at the server level if you have access to do so. See http://msdn.microsoft.com/en-us/library/jj676913%28v=vs.85%29.aspx To learn about configuring web servers to specify document modes.
This is what I see. Does anyone see the same as me. If not, I wonder if it is related to Quirks mode.
On IE 10 for me works fine, but in the IE 9 and lower not works.
This could be happens because the IE 9 don't have some elements of HTML5.
I think that you put this in your file will woks.
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
Made a test.
I hope help you.
Link for downloads files
https://code.google.com/p/html5shiv/
After allot of searching the bug had to do with the imagesLoaded function which was being used which is part of:
http://isotope.metafizzy.co/
IE does not seem to play nice with it so I made the carousel to initialize on window’s load event (jQuery(window).load) instead of “imagesLoaded”.

page opens in IE7 document mode instead of IE9

I know many variations of this question have been asked here but so far no solutions I have tried work for me.
I would like my web app to open in IE9 document mode in IE. When I open the page now, it always opens in 'Internet Explorer7 Standards), while 'Internet Explorer9 standards' is listed as the page default.
I have tried several variations of tagss, including
<meta http-equiv="X-UA-Compatible" value="IE=Edge">
and
<meta http-equiv="X-UA-Compatible" content="IE=7,IE=9">
(both right after the head tag)
I have also tried conditional statements, such as this example from S.O.:
<!--[if IE 7 ]> <body class="ie7> <![endif]-->
<!--[if IE 8 ]> <body class="ie8> <![endif]-->
<!--[if gt IE 8]><!--><body><!--<![endif]-->
Currently I am using: <!DOCTYPE html>
Of course I can manually switch the mode in F12, but I would like to site to open directly in IE9 Document mode (the Compatibility mode always defaults to IE9 Compatibility mode).
Currently I am working on an intranet development server; I have read that this may be a factor? But I would really prefer any solutions to be client-side, that I can add to the JS/HTML.....
Developer Tools Manually Overriding the Document Mode
If Internet Explorer 9 Standards is listed as the Page Default, this means you may have manually changed it to Internet Explorer 7 Standards via the tools. Just switch it back to Internet Explorer 9 Standards in the F12 Developer Tools themselves.
The tools will remember your explicit request to show the page in another Document Mode, and as such not revert to the page default. Consider the following from MSDN:
When you first load a webpage, F12 tools determines the default Document Mode and selects the appropriate mode. The text Page default in parentheses indicates the default mode of the webpage. A check mark appears next to the current mode of the document. Changing the mode causes the webpage to refresh, and remains in this mode until another mode is chosen or the browser is closed.
— Navigating the F12 Developer Tools Interface (emphasis in original)
If you'd like confirm this answer, open up a new browser window and navigate to http://stackoverflow.com. You should note in the F12 Developer Tools that it loads with a Document Mode of "Standards" (IE9 Standards if you're in IE9).
Switch Stack Overflow's Document Mode to IE7 Standards and refresh the browser. After refreshing you'll find that the browser stays with Document Mode: Internet Explorer 7 Standards, and lists Internet Explorer 9 Standards as (Page Default).
Compatibility View Settings
According to the MSDN resource How Internet Explorer Chooses Between Document Modes, the only other potential cause for this would be Compatibility View Settings.
In Internet Explorer 9, click Tools, then Compatibility View Settings. You can find your settings for Intranet sites there. In Internet Explorer 10 (Desktop Mode), you may have to press Alt to reveal the Tools menu item.
Just put following code and your IE browser would open by default in defined compatible view.
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9">
You can change "IE=EmulateIE9" to "IE=EmulateIE8" if you want make IE8 as default compatibility view.
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8">
The issue in my case was that a group policy had been applied on my company-issued laptop which explicitly set the domain that I was using to render in Compatibility Mode. I found this by checking the IE console (F12):
And I verified this by running the following command on my machine, which generated a report of applied group policies on my machine:
gpresult /h C:\gpresult.html
The report had a section like this, which included the root domain of the website I was working on:
You can put the following code sample too.
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
This will load your application in the default browser mode. And specially make sure to include this meta tag as the first tag just after the head tag. Other wise it will not work.

How to display browser specific HTML?

I'm trying to find a way to display one link to an IE user and another link to all other browsers using javascript or conditional comments (or whatever it takes).
Basically...
//pseudo code
<!--[if IE]>
<a href"ie-only.html">click here!</a>
<!--[else]>
<a href"all-other-browsers.html">click here!</a>
<![endif]-->
I don't think this is possible with conditional comment tags (which only work in internet explorer). Plus I don't think there is an "else" statement.
Is there a way to do this with javascript? Please help! Thanks!
I don't think this is possible with conditional comment tags (which only work in internet explorer)
Sure it is. You just have to leave the content for non-IE browsers in a position such that it's part of a conditional comment clause but not actually inside a <!-- comment -->. Then browsers that don't know about conditional comments will see the content fine. This is known as a downlevel-revealed conditional comment.
Unfortunately the markup Microsoft give you there is invalid HTML (and not even well-formed XML). To make it pass muster you just need a few additional ‘--’s:
<!--[if IE]> This is IE! <![endif]-->
<!--[if !IE]><!--> This ain't IE! <!--<![endif]-->
Although I have to echo AnonJr's non-answer, in that it's rare you should need a completely separate link/page for IE compared to other browsers. If you're doing something tricky like complex VML and ActiveX work in IE with Flash on other browsers I guess there could be a reason for it, but usually a few CSS and script hacks over the same basic page should suffice.
This is not going to be the popular answer, but its damn time somebody started posting it - stop with the browser-specific junk. You're only perpetuating future problems when new versions come out.
If developers had taken the additional time (yes, it takes time and hard work. If you can't convince your clients you aren't trying hard enough) then we wouldn't have seen IE7 "break the web" and there would have been even less of a brouhaha with IE8.
Yes, IE is less standards compliant than the others. But, Fx is also missing certain things that are a part of the standard too. They all suck when it comes to "standards". But they are all getting better. (At different rates, but they are all getting better.)
Think first why you are trying to do this, and ask yourself if you really want to deal with this when the next browser version comes out and you have to re-jigger your browser detection and how you handle version X of browser Y.
[/rant]
Edit: To answer some of the comments that point out the obvious fact that I didn't really answer the question, without more information this question makes me wonder if we're not trying to help a person decide to hammer in a nail with a glass bottle or a shoe...
This is the Microsoft-approved way:
<!--[if IE]>
click here!
<![endif]-->
<![if !IE]>
click here!
<![endif]>
More information available at http://msdn.microsoft.com/en-us/library/ms537512(VS.85).aspx.
Edit
This code is implicitly guaranteed to work in all current and future versions of IE starting with IE 5. For non-IE browsers, the code works by relying on those browsers ignoring the "nonsensical" <![if !IE]> tag, which they all do, and I've never seen it fail. For a version that uses nothing but good ol' HTML comments, see bobince's answer, which I actually prefer to the Microsoft-provided solution.
One way that I've figured out how to do it:
Get the javascript code from http://www.quirksmode.org/js/detect.html and put it in the <head> tag.
Then in your <body> tag use:
<script type="text/javascript">
<!--
if (BrowserDetect.browser == 'Explorer') {
document.write('Explorer');
} else {
document.write('Other Browsers');
}
// -->
</script>
Not sure if this is the most simple way to do it but it got the job done.
A shot in the dark, maybe, but would this work?
<style>
a.forIeOnly {display: none; }
a.notForIe {display: block; }
</style>
<!--[if ie]>
<style>
a.forIeOnly {display: block;}
a.notForIe {display: none; }
</style>
<![endif]-->
Link One
Link Two
It's nowhere near as clean/attractive as an if/else statement could be, but...it was the easiest way I could think of to implement a solution. Though it may well be fraught with issues all of its own.
Add this to your header :
<script src="http://github.com/rafaelp/css_browser_selector/raw/master/css_browser_selector.js" type="text/javascript"></script>
Then whatever you want to your .css page :
/* Chrome Only */
.chrome embed {
display: none;
}
/* Firefox Only */
.gecko video {
display: none;
}
Source : http://rafael.adm.br/css_browser_selector/
Available Browser Codes [browser]:
ie - Internet Explorer (All versions)
ie8 - Internet Explorer 8.x
ie7 - Internet Explorer 7.x
ie6 - Internet Explorer 6.x
ie5 - Internet Explorer 5.x
gecko - Mozilla, Firefox (all versions), Camino
ff2 - Firefox 2
ff3 - Firefox 3
ff3_5 - Firefox 3.5
ff3_6 - Firefox 3.6 new
opera - Opera (All versions)
opera8 - Opera 8.x
opera9 - Opera 9.x
opera10 - Opera 10.x
konqueror - Konqueror
webkit or safari - Safari, NetNewsWire, OmniWeb, Shiira, Google Chrome
safari3 - Safari 3.x
chrome - Google Chrome
iron - SRWare Iron
I didn't try, but maybe you could use IE flaws on CSS. Eric Meyer has written this article on the subject: Tricking Browsers and Hiding Styles.
You could always use CSS to hide the code from specific browsers. For instance, considering the following code:
<a href"ie-only.html" id="ie-only">click here!</a>
<a href"all-other-browsers.html" id="other-browsers">click here!</a>
You could apply the following CSS hacks, and the appropriate links would be displayed to the appropriate browsers.
/* Display settings for most browsers */
#ie-only {display: none;}
#other-browsers {display: block;}
/* Display settings for IE <= 6 */
* html #ie-only {display: block;}
* html #other-browsers {display: none;}
IE supports conditional compilation, which you can use to easily deliver IE-only code without needing to perform user agent sniffing or feature detection.
/*#cc_on
/*#if (#_jscript)
alert("IE.");
#else #*/
alert("Not IE.");
/*#end
#*/

Categories

Resources