CODEWITHSUNDEEP
internet-explorer-8viewcompatibilityforcing
Maya Kathrine Andersen
Maya Kathrine Andersen

Reputation: 302

Frustrating: Can't force IE 8 into "Compatibility view"!

I've got two very different websites. Both of them have different errors when displayed in the "Internet explorer 8" browser mode!

When clicking the "Compatibility view" button next to the address bar both of the sites look great. When I afterwards look at the "Browser mode" and "Document node" by using the built-in "Developer tools", I also notice the "Browser mode" is "IE8 Compat view" and the "Document mode" is "IE7 Standards". Just as I expect them to be.

Then I want to force "Internet Explore 8" into the "Browser mode" : " IE8 Compat view", so that my users won't have to click the "Compatibility view" button next to the address bar to get what they really need to see.

The only way I can think of doing this is by inserting a metatag below the title inside the header like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
    <head>
        <title>Test</title>
        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
        <meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
        <link ... />
        <script ...></script>
    </head>
    <body>
        ...
    </body>
</html>

Then i reload the website and the "Compatibility view" button next to the address bar disapears. Just as expected. When I afterwards look at the "Browser mode" and "Document node" by using the built-in "Developer tools", I suddenly see something I really did NOT expect. I expected the "Browser mode" to be "IE8 Compat view" and the "Document node" to be "IE7 Standards", but the "Browser mode" is "IE8" and the "Document mode" is "IE7 Standards" and the websites suddenly have a new set of errors compared to when viewed in "Internet explorer 8" browser mode!

It is very frustrating why can't I force the "IE8 Compat view" browser mode instead of the "Internet explore 7" or "Internet explore 8" browser modes?

Upvotes: 6

Views: 11587

Answers (8)

LucasM
LucasM

Reputation: 441

In my particular case my site would not render properly in Compat View. I finally learned that Browser Mode affects the User Agent string. My site style rules were based on User Agent so some styles were simply not getting applied in Compat view.

I was using 

document.documentElement.setAttribute('data-useragent', navigator.userAgent);

so that later I could use css attribute selectors like 

html[data-useragent*='MSIE 8.0'] p {}

I solved by adding:

html[data-useragent*='MSIE 7.0'] p {}

(not caring about true IE7 as true IE7 was not supported anyway)

In my experience there is nothing a developer can do to force IE8 from "Browser Mode: IE8 Compat View" into "Browser Mode: IE8". Again, I am are talking about BrowserModes NOT DocumentModes (which can be controlled by meta tags, response headers, etc).

Upvotes: 1

Metro
Metro

Reputation: 1171

If your page contains ASP.NET Ajax stuff, you may need to update the site with this

http://support.microsoft.com/kb/2600088

Upvotes: 0

mg1075
mg1075

Reputation: 18155

Had a problem forcing IE8 into Document Mode IE8 Standards using the HML5 Boilerplate for an asp classic site. Piecing together answers from this and other questions, adding this code ABOVE the <doctype> declaration seems to have resolved the problem and forced Document Mode from IE7 back to IE8. <%= response.AddHeader("X-UA-Compatible", "IE=edge") %>

Upvotes: 0

Warren Seine
Warren Seine

Reputation: 2449

I was transforming an XML document so I couldn't set the DOCTYPE properly. Instead of moving above <html>, which is XML-invalid, I simply put it in a header.

In PHP:

header("X-UA-Compatible: IE=7");

Upvotes: 0

user186906
user186906

Reputation:

The xmlns="http://www.w3.org/1999/xhtml" attribute is cancelling out the meta tag. Move the meta tag above the html tag. Yep, that's right, above the html tag. Then it will execute the emulateIE7 before the javascript runs. I tested this in IE7, IE8 and Firefox.

Upvotes: 1

Walter Rumsby
Walter Rumsby

Reputation: 7535

You have set the meta tag correctly, but IE8 appears to use the previous rendering mode until you restart the browser.

To tell what your users are going to see:

  1. Click on the Document Mode in the developer toolbar and see which value is marked (Page Default).
  2. Restart IE8 and view your document - IE should now use the page default.

Upvotes: 2

Michael Madsen
Michael Madsen

Reputation: 55009

To quote the IEBlog:

“Browser Mode” affects the user agent string, version vector used when evaluating conditional comments, and the rendering mode.

It's detailed a bit more on http://msdn.microsoft.com/en-us/library/dd565624(VS.85).aspx.

As you can clearly see, you wouldn't be able to affect all of these things anyway: by the time you tell the browser to act like IE7, it's already acting as IE8.

Perhaps the real question is: Why does it matter that much to you what the browser mode is? The document mode is what you should be most concerned with - everything the browser mode changes as far as the rendering is concerned relate to stuff that is excluded/included but version checking, and users aren't going to look in the developer tools anyway, so they won't care.

Instead of wasting a lot of time getting it to look like pure compatibility mode in the developer tools, you should rather go and make sure that user agent string checking and conditional comments make it so that IE7 and IE8 get the same material to work with, and then leave the EmulateIE7 in.

EDIT:

The problem is your version checks, and as I promised below, I'm going to tell you where the problem is.

If you use the developer tools to debug the menu placement script, you can dig down and see that the execution path for get_x_position differs when the browser reports itself as IE7 or IE8: is_ie5up is set to true for IE7 mode, and false for IE8 mode. This results in very different values being returned.

At this point, we must go back to where this variable is set:

var is_ie5up    = (is_ie6up || (is_ie  && !is_ie3 && !is_ie4));

As you can see, this depends on the value of is_ie6up, so let's have a look at the surrounding code...

var is_ie8up    = (is_ie8   ||  is_ie9up);
var is_ie7up    = (is_ie7   ||  is_ie8up);
var is_ie7up    = (is_ie7);
var is_ie6up    = (is_ie6   || is_ie7);
var is_ie5up    = (is_ie6up || (is_ie  && !is_ie3 && !is_ie4));
var is_ie5_5up  = (is_ie6up || (is_ie && !is_ie3 && !is_ie4 && !is_ie5));

...do you spot the flaw (Hint: compare lines 2 and 4 of that snippet)?

That's right: is_ie6up is not set to true unless the browser is exactly IE6 or IE7. The proper line should of course read

var is_ie6up    = (is_ie6   || is_ie7up);

...but wait. That's no good either, because line 3 of the snippet changes is_ie7up to only be true if the browser is exactly IE7! So, you need to delete the overwriting of is_ie7up, and fix the setting of is_ie6up.

My guess is that you have the EXACT same problem on the other site: you've messed up the browser checks in much the same way.

Upvotes: 5

L. Cornelius Dol
L. Cornelius Dol

Reputation: 64026

Isn't the problem that you're using the wrong document type?

Maybe:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

For more info, see http://htmlhelp.com/tools/validator/doctype.html.

Upvotes: 0

Related Questions