Ok so sorry for being blunt here but I have been developing on IE 8 and IE9 for the past 2 years and can't seem to get this right. I work at abhor company and develop for their website. For some reason IE8 or IE9 defaults to a lower document mode like ie7 or ie8. I have tried everything...
1) put HTML 5 doctype and nothing else. According to Microsoft this should be enough
2) put html5 doctype and put x-ua-compatible meta tag first in the page under title and set to either edge or IE8 or IE9 respectively.
My page looks like this
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7">
<![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt- ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <! [endif]-->
<!--[if gt IE 8]> <html class="no-js"> <! [endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
It's really getting frustrating because everything I read says it should work. Microsoft claims this will work or even just settings HTML 5 doctype will work. I've heard to set a http header to fix but honestly, is Microsoft serious? I find it hard to believe that developers need tot change their apache settings to add a http header to Make page render I'm standards mode
Can someone please help me here? What am I missing??? I'm really beginning to hate Microsoft Even more!!!!!
UPDATE::
I recently discovered that my company has the "show intranet sites in compatibility view" checked off and it looks l like if i uncheck it then it will work fine. However, that is not the solution! Everywhere i read i see that if you see the X-UA-compatible meta tag or http header it should take precedence. Well this is a complete lie. Does anyone else have an answer?? I understand that external users will be fine however my business is testing this and they are asking questions because they are internal and its hard to convince them and to tell them to uncheck the box. It doesnt give them a great feeling. Also, i cant have the desktop engineering team remove that because it was put in place because older applications internally are not written to support IE8,9 so they need this.
Any help is appreciated. thanks!
Thanks
Our intranet is also locked down with Compatibility View being used for all Intranet sites and uses IE 8 as they are all Windows XP.
I found that once IE 8 started processing the standard boiler plate conditional comments (to determine which class to attach to the <html> tag) then it was game over: IE decided at that point it was running in Compatibilty Mode (IE 7) and nothing I could do would recover the situation.
I found that by placing the <meta> tag immediately after the <!DOCTYPE> tag it all worked exactly as expected:
<!DOCTYPE HTML>
<meta http-equiv="x-ua-compatible" content="IE=Edge">
To my eyes this doesn't seem very "standard" but it works. I'd love any alternative methods of doing this where the <meta> tag could be placed into the <head> as I tried for hours to do.
The 5th and 6th line of your code are in error and cause, as #JaredFarrish remarks in a comment, the page to display as blank on IE.
At the end of the 5th line, remove spaces from
<! [endif]-->
At the end of the 6th line, change
<!--<! [endif]-->
to
<![endif]-->
On your actual page, there is probably something in the code later that stops the skipping that the malformed construct causes on IE.
It’s still unclear what puts IE into Quirks Mode. More information is needed to address this issue. It could even depend on the domain in which the page is, so disclosing the URL may help. For generalities, see IE8 and IE9 Complications (in setting browser mode).
Ralph Bacon's answer just solve the issue for me. There is nothing wrong with the html5 boilerplate we are using.
If you're intranet is using compatibility mode, then you should place this
<meta http-equiv="X-UA-Compatible" content="IE=edge">
after the
<!DOCTYPE HTML>
So overall, your header would look like this:
<!DOCTYPE html>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang=""> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang=""> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang=""> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js" lang="en">
<!--<![endif]-->
Related
I'm publishing my site with Adobe Business Catalyst.
The following code:
<!DOCTYPE html>
<!--[if lt IE 8]> <html class="lt-ie9 lt-ie8" lang="en"><![endif]-->
<!--[if IE 8]> <html class="lt-ie9" lang="en"><![endif]-->
<!--[if gt IE 8]><!--> <html lang="en"><!--<![endif]-->
<head>
after publishing it becomes:
<!DOCTYPE html>
<html lang="en">
<head>
Most probably BC doesn't accept anything before the element.
Is there an alternative (code or place)?
Most probably BC doesn't accept anything before the element.
No, more likely because it is stripping out comments, and the <!-- --> conditionals are seen as comments (they're actually called "conditional comments").
BC may have a config option to strip out comments. If it does, switching that config option off should solve the problem. (it will also leave other comments in your code though, which you may or may not want)
Alternatively, you could re-think how you deal with browser compatibility. Detecting the browser version is often not the right approach anyway. You might want to consider using a Javascript library such as Modernizr, which will help you detect support for specific features in the user's browser, rather than just detecting the browser itself.
This would probably allow you to ditch all those variations of your <html> tag entirely, and just use a single standard one regardless of the browser version.
In modern web pages you often see something like:
<!--[if IE 7]>
<html class="ie ie7" lang="en-US">
<![endif]-->
<!--[if IE 8]>
<html class="ie ie8" lang="en-US">
<![endif]-->
<!--[if !(IE 7) | !(IE 8) ]><!-->
<html lang="en-US">
<!--<![endif]-->
The purpose is obviously to apply different html, depending on browser and browser version. I assume this is done server side, as it seems everything except the appropriate parts are commented out.
What software is used on the server to select which part to comment out depending on the visiting browser?
Those are conditional comments. They are parsed (contrary to the HTML spec), client side, by Internet Explorer (versions 5-9). Everything else (including IE 10) treats them as regular comment syntax.
I have been looking for an explanation of why this part of the html tag conditionals for IE in the HTML5 Boilerplate have this part:
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
I ask just so I have an understanding of how this is working. I understand the conditionals above this one, but why is this one different than those above it? I don't get what this condition is doing compared to those above it.
Thank you in advance for helping me to understand something that I will be using.
Basically, the last part is used for IE versions 9 and up, and all other browsers. However, the syntax is shorter and not as straight-forward as it could be because HTML Boilerplate is heavily concerned with optimization.
I found the article that explains it, I recommend you read the whole thing:
http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/
Here's my proposed solution:
<!--[if lt IE 7]> <html class="ie6"> <![endif]-->
<!--[if IE 7]> <html class="ie7"> <![endif]-->
<!--[if IE 8]> <html class="ie8"> <![endif]-->
<!--[if gt IE 8]><!--> <html> <!--<![endif]-->
This was actually updated afterwards due to issues you can read about in the article.
Apparently part of the weird syntax has to do with a Dreamweaver(!) bug. Here is an excerpt:
Here is the new recommendation, and the one that's in use in the HTML5
Boilerplate.
<!--[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]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html class=""> <!--<![endif]-->
Basically, the last line is saying "Do this if IE9+ or not IE". Some of the bullet points below are not directly related to your question, but I'll include them anyways.
Why?
This fixes a file blocking issue discovered by Stoyan Stefanov and
Markus Leptien.
It avoids an empty comment that also fixes the above
issue.
CMSes like WordPress and Drupal use the body class more
heavily.
This makes integrating there a touch simpler It doesn't
validate in html4 but is fine in html5. Deal with it.
It plays nicely
with a technique to kick off your page-specific javascript based on
your markup.
It uses the same element as Modernizr (and Dojo). That
feels nice.
I left an empty class in there because you'll probably be
putting a no-js in there or something else. If not, delete.
Also if
the extra comments around that last tag look weird to you, blame
Dreamweaver, which chokes on normal !IE conditional comments.
More discussion about this issue here: https://github.com/h5bp/html5-boilerplate/issues/425/#
I am in need to know which is the current browser my website is being viewed on, because that way I know how to execute specific code for Images and CSS, stuff like that...
Check out Modernizer and Selectivizr
As your comments suggest that you only need IE detection, the best way I've seen of detecting IE for CSS purposes is used in the HTML 5 Boilerplate project, which uses a technique by Paul Irish:
<!--[if lt IE 7]> <html class="ie6"> <![endif]-->
<!--[if IE 7]> <html class="ie7"> <![endif]-->
<!--[if IE 8]> <html class="ie8"> <![endif]-->
<!--[if gt IE 8]><!--> <html> <!--<![endif]-->
I'd recommend using the HTML5BP version:
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!-- Consider adding a manifest.appcache: h5bp.com/d/Offline -->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
There are both PHP and JavaScript classes/functions for this. All you have to do is google for the respective one and then use it to your liking on a per browser basis. You could even go a step higher and do it based on .htaccess but over all depends on what your doing with what where when why etc..
All in all though generally speaking short of some styling issues, or some specific client side scripting issues almost anything you do with just standard html will work fine cross all browsers.
you can check the browser info with javascript embedded into html.
more details can e.g. be found here:
http://www.alanwood.net/demos/browserinfo.html
example code: (now works for sure)
<!DOCTYPE html>
<html>
<head><title>test</title></head>
<body>
<script>
alert(navigator.userAgent);
</script>
</body>
</html>
You'll want to inspect the navigator.userAgent property. There are a few Javascript libraries that you can download that will do this parsing for you. However, you should know that trying to determine the browser type by parsing the user agent string is incredibly unreliable.
If you're trying to toggle behavior based on browser capabilities you should instead check for those specific features and see if they are enabled in the current browser. You can start by reading this post on QuirksMode.
Someone else mentioned Modernizr which is just a library that does the feature detection for you. This is much more reliable than inspecting the browser's user agent.
Use XPath APIs to determine the browser engine:
//Gecko
var gecko = (!!window.XPathExpression === true) && "gecko";
//Trident
var trident = (!!window.XPathEvaluator === false && !!window.XPathExpression === false) && "trident";
//WebKit
var webkit = (!!window.XPathEvaluator === true && !!window.XPathExpression === false) && "webkit";
var browser = (String(gecko)+String(trident)+String(webkit)).replace(/false/g,"");
Use document.documentMode to detect which mode IE is using as well.
References
Windows Internet Explorer Platform APIs
Mozilla Source Code Directory Structure
MDN: Web API Index
WebKitJS
Planet Webkit
Web specifications support in Opera
Details for Document API - Microsoft Edge Development
I am having a big issue trying to disable IE's Compatibility mode.
After much head banging, I have traced the issue down to whether the site is been served as Apache's default config, or as a virtual host.
I know this to be the case as when I access the site with the 'localhost' domain, everything is fine. As soon as I access the very same page via a domain configured in a virtual host - the site renders in Compatibility mode.
Can anyone please shed any light on this crazy issue???
Serving the site as the default host isn't an option.
Dean
Ah-ha!
From here (emphasis mine):
A large number of line-of-business websites are Internet Explorer 7 capable today. In order to preserve compatibility, Internet Explorer 8 ships with smart defaults based on zone evaluation. In the default state, all sites on the public internet display in Internet Explorer 8 Standards mode (Compatibility View off) and all intranet websites display in Internet Explorer 7 Standards mode (Compatibility View on).
...
If you navigate to sites on your local intranet like http://myPortal and http://sharepoint/sites/mySite, Internet Explorer 8 identifies itself with a User Agent string of ‘7’, Version Vector of ‘7’, and displays webpages that trigger standards mode in Internet Explorer 7 Standards mode. This combination allows webpages that worked correctly in Internet Explorer 7 to continue to do so in IE8.
I'm not commenting this. I'm sure this has some good real-world reasons, but I still have the urge to hit my head on the desk.
When a web-site is being served on the local intranet, Internet Explorer will (by default) switch to IE7 compatible mode.
You can use the to disable this "IE7 on the intranet compatibility mode" by including the X-UA-Compatible response header to your page:
HTTP/1.1 200 OK
X-UA-Compatible: IE=8
You can also add the equivlent of an http response head to your page by including a meta http-equiv element to the HEAD> of your document. E.g.:
<!DOCTYPE html>
<html>
<head>
<title>Hello world!</title>
<meta http-equiv="X-UA-Compatible" content="IE=9">
</head>
<body>
</body>
</html>
Note: If you do include the header
| Header | Value |
|------------------|---------|
| X-UA-Compatible | IE=10 |
to your html document, you must add it high enough in the HEAD before something else happens that locks in the document mode - and you're locked into IE7.
Wrong example 1
<!DOCTYPE html>
<meta http-equiv="X-UA-Compatible" content="IE=8">
<html lang="en">
<head>
meta elements belong inside the head element
Wrong example 2
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello, world!</title>
<link rel="stylesheet" type="text/css" media="all" href="main-73c2257f2d.css" />
<meta http-equiv="X-UA-Compatible" content="IE=8">
The X-UA-Compatible element must appear first in the head; except for title and other meta elements.
The X-UA-Compatible header isn't case sensitive; however, it must appear in the header of the webpage (the HEAD section) before all other elements except for the title element and other meta elements.
Wrong example 3
<!doctype html>
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta http-equiv="X-UA-Compatible" content="IE=10">
The conditionals lock the browser into IE7 mode. Remove them.
Correct
<!doctype html>
<head>
<title>Hello, world!</title>
<meta http-equiv="X-UA-Compatible" content="IE=10">