Why does webpage display in IE8 browser mode and IE7 document mode?

0
votes

For some unknown reason the site im working on keeps cross matching browser and document mode. When i open IE8 dev tools i see that browser mode is IE8 but document mode is IE7.

I've made several doctype changes but am unable to get the site to automatically load in the browser mode for the document mode also namely IE8.

Current Doctype declaration:

<%@ Page Language="vb" AutoEventWireup="true"  Src="Scripts/Splash.aspx.vb" Inherits="SplashFunctionality"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Welcome to CAE's KC-135 ATS Home</title>
<link rel="stylesheet" type="text/css" href="CSS/HomeStyles.css"/>
<link rel="stylesheet" type="text/css" href="CSS/headerStyles.css"/>
<script type="text/javascript" src="Scripts/Roladex.js"></script>
<script type="text/javascript" src="Scripts/HeaderNav.js"></script>
<script type="text/javascript" src="Scripts/HomeFunctionality.js"></script>
<script type="text/javascript" src="Scripts/JSTweener.js"></script>
</head>
<body>
2
htmldoctypeie8-browser-mode

2 Answers

2
votes

The reason this happens is typically because of a config setting in IE, which tells it to switch into compatibility mode under certain conditions. This is often set to happen when you browse a site in your local network -- so it often happens when you are testing a site you're developing.

You can, of course, switch it off by changing the config. But it's still possible for your users to have that setting turned on, so you need to try to deal with it within the site.

The way to do this is to set the X-UA-Compatible meta flag, which you can use to force IE into the correct mode.

In most cases, the best setting for this is as follows:

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

Add this to the top of your code, inside the <head> block.

Hope that helps.

1
votes

To force IE the use the latest available settings on the browser you can add this to your .htaccess if you use Apache:

# ----------------------------------------------------------------------
# Better website experience for IE users
# ----------------------------------------------------------------------

# Force the latest IE version, in various cases when it may fall back to IE7 mode
#  github.com/rails/rails/commit/123eb25#commitcomment-118920
# Use ChromeFrame if it's installed for a better experience for the poor IE folk

<IfModule mod_headers.c>
  Header set X-UA-Compatible "IE=Edge,chrome=1"
  # mod_headers can't match by content-type, but we don't want to send this header on *everything*...
  <FilesMatch "\.(js|css|gif|png|jpe?g|pdf|xml|oga|ogg|m4a|ogv|mp4|m4v|webm|svg|svgz|eot|ttf|otf|woff|ico|webp|appcache|manifest|htc|crx|oex|xpi|safariextz|vcf)$" >
    Header unset X-UA-Compatible
  </FilesMatch>
</IfModule>

More info can be found (as stated) github.com/rails/rails/commit/123eb25#commitcomment-118920

You can also add this as a regular meta tag:

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

if apache is not used.

And as a side note, I would suggest using html5 doctype:

<!doctype html>