I have a website, where IIS sends the following in the header (which is correct for the overall site):
X-UA-Compatible: IE=Edge
However, on a specific page, I have at the very top of my <head> section the following:
<!--[if lt IE 9]>
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<![endif]-->
This is being interpreted correctly by IE8, as it shows up at the top of the when I view the page source. However, it never changes my Document Mode from "IE8 Standards" to "IE7 Standards." The Browser Mode is in IE8 Compatibility View by default(it's an intranet site), but even in normal IE8 mode, it still has the same Document Mode issues.
I thought that having the meta tag on the page overrides whatever was sent in the initial header from the server. Is there anything else I could be doing to change the document mode for this one page?
EDIT: I can force IE7 document mode if I place the following in my Page_Load of my aspx page Response.AddHeader("X-UA-Compatible", "IE=7"); so I now have this header show up after the IE=Edge header, so only this second one is interpreted. This doesn't actually solve my issue though, because the meta tag above has the advantage of not being used in IE9 or IE10, and some of the niceties of the page disappear when forcing to IE7 document mode. I just specifically need this to work for IE8 and older.
Also, if I remove the conditional CSS, it appears to get the document mode correct. So is it possible that conditional CSS executes after the page loads, and if so, how do I fix it to make IE7 document mode only show up for IE8 and earlier browsers?
Are you sure you have the order correct? I just tried this page that I found HERE and my browser defaults to "IE7 standards".
<html>
<head>
<!--[if lt IE 9]>
<meta http-equiv="X-UA-Compatible" content="IE=7" >
<![endif]-->
<title>My webpage</title>
</head>
<body>
<p>Content goes here.</p>
</body>
</html>
Related
Since this afternoon, Facebook is not able to read the og tags of a website I'm working on anymore. Facebook debugger says all my properties are missing (og:url, og:type, og:title, og:image, og:description, etc) when I can clearly see all of them in my source code.
When I view the source of this page (or any other page on this domain), everything looks ok.
However, when I input that page in Facebook's debugger and use 'See exactly what our scraper sees for your URL', the code is all messed up with words and spaces missing. In fact, the whole section containing the og properties is missing.
What's happening? I haven't changed anything to the website recently and it was working fine before. Only thing that changed recently are my dns settings, but this should not be affecting Facebook...
Anyone sees what I'm missing here?
Many people suggested in other threads that the problem is because the paths are relatives instead of absolute (like for og:image, for exemple), but that clearly isn't my problem as my paths are absolute, and the section with all my og properties is simply just not showing up when scraping as Facebook.
Thanks
I found this problem on my websites too. It's because of W3 Total Cache's Minify feature. Disable it and purge all caches, then you're good to go.
Sometimes the browsers auto fix some HTML for rendering the page correctly, things like closing tags, adding missing semantic tags, etc. But the bots are a bit more demanding on valid HTML.
Let's take the first 12 lines of the source of that page you shared. This is what the browser receives:
<!doctype html>
<!--[if IE 8]><html
class="ie8" lang="fr-FR" prefix="og: http://ogp.me/ns#"> <![endif]-->
<!--[if IE 9]><html
class="ie9" lang="fr-FR" prefix="og: http://ogp.me/ns#"> <![endif]-->
<!--[if gt IE 8]><!--><html
lang="fr-FR" prefix="og: http://ogp.me/ns#"> <!--<![endif]--><head><link
rel="stylesheet" type="text/css" href="http://cdn.vedettequebec.com/wp-content/cache/minify/ef20c.css?x41125" media="all" /><meta
charset="UTF-8" /><meta
name="viewport" content="width=device-width, initial-scale=1.0"><link
rel="pingback" href="http://vedettequebec.com/xmlrpc.php" /><meta
name="author" content="BadassB"><link
As you can see, the attributes are wrapped up to the next line, which is kind of valid and most browsers will handle that, but looks like the Facebook scraper trims the \n characters and interprets the code like so:
<!doctype html><!--[if IE 8]><htmlclass="ie8" lang="fr-FR" prefix="og: http://ogp.me/ns#"> <![endif]--><!--[if IE 9]><htmlclass="ie9" lang="fr-FR" prefix="og: http://ogp.me/ns#"> <![endif]--><!--[if gt IE 8]><!--><htmllang="fr-FR" prefix="og: http://ogp.me/ns#"> <!--<![endif]--><head><linkrel="stylesheet" type="text/css" href="http://cdn.vedettequebec.com/wp-content/cache/minify/ef20c.css?x41125" media="all" /><metacharset="UTF-8" /><metaname="viewport" content="width=device-width, initial-scale=1.0"><linkrel="pingback" href="http://vedettequebec.com/xmlrpc.php" /><metaname="author" content="BadassB"><link
You see the issue now? The code is broken due to the attributes being added right next to the tag name, causing tons of "unclosed tags". For example, check the <html> tag being converted to <htmlclass> and its closing tag will be </html> because there's nothing right after the tag name, making that tag unclosed.
Disable any plugins that could be harming your HTML, plugins like HTML minifiers. Check in the settings if there's something like "wrap attributes to new lines".
I have created one jsp page that page is working fine across the all browser.when i rendered that page in IE8 browser it's working fine.But problem is when i select
Browser Mode-IE8 Compatibility View than corresponding
Document Mode- IE7 Standards will be selected automatically.
then my jsp page giving a lot alignment issue.But when i select again
Document Mode- IE8 Standards than my page working fine..
How i can control this thing Is there any way to setting because i can change again again the document mode..i want Document Mode will fix IE8 Standard..
Please provide the solution how i can handle this issue...
Try changing the DOCTYPE to:
<DOCTYPE html>
And then try adding this meta tag into the <head> of your document:
<meta http-equiv="x-ua-compatible" content="IE=Edge"/>
This meta tag should force IE into standards mode, you can find more information about it here.
You should end up with something that looks like:
<DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta http-equiv="x-ua-compatible" content="IE=Edge"/>
</head>
<body>
<p>Content</p>
</body>
</html>
I have a page working in all browsers including IE 8/9 except when those browsers shift to compatibility mode - then any text tagged as <p> becomes horribly oversized - larger than <h1>. The <p> is not responding to any stylesheets or css directives as pertains to size.
jquery and jQueryUI are present on the page but not involved in (explicitly) styling my <p> elements.
This meta-tag forces IE to display in the highest mode available to the version of Internet Explorer :
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
Put it in the <head> section of your page.
Jukka's premise proved correct - an unclosed H1 tag was the cause.
The website I'm working on is www.shandon.com.au .
It looks pretty well on every browser except IE9, where the navigation menu disappears (it uses Superfish JS).
I'm running a Mac so I can test it only on IETester in VMWare, and if I don't move the mouse everything looks fine, whenever I hover the webiste window, it disappears and the search box move down.
What should fix this? Any help will be appreciated! Thanks!
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9" />
That's one of the problems, change this to
<meta http-equiv="X-UA-Compatible" content="IE=Edge" >
Then delete this line from the head:
<!--[if IE 9 ]> <html class="ie ie9 no-js" dir="ltr" lang="en-US" xmlns:og="http://opengraphprotocol.org/schema/"> <![endif]-->
I don't think you need IE9 specific detection, it will render everything correctly in your website anyway.
I've tried the following and all it does is change the Document Mode, not the Browser Mode:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
<meta http-equiv="X-UA-Compatible" content="IE=7">
My particluar page only works when the browser mode is either IE7 or IE8 Compat View.
The code you posted should work.
Please ensure the following:
The meta tag is right at the top of the header, as first element after the <title></title>.
Restart IE and open your page without manually setting the Browser- or Document Mode from the Developer Tools. Setting these manually can overwrite IE's behavior and causes it to ignore the compatibility tag.