How can I show a message to IE6/IE7 browsers to upgrade to IE8 and have IE8 not show the IE7 warning?

24
votes

I want to only allow users with IE8 (not IE6, IE7) or another browser to access my site when logged in.

I followed: http://code.google.com/p/ie6-upgrade-warning/ But I also wanted it to not allow IE7 users to use the main site when logged in (they can view public pages.) The reason is that the main web application has a lot of JavaScript effects that will only work 100% in IE8 rendering mode (or any other browser aside from IE.)

The problem with modifying the ie6 upgrade warning to be ie7 is that it looked like IE8 displayed my webpage in an IE7 rendering mode and "lies" about being ie7 and triggers the IE7 stylesheet code.

So how can I force IE8 to always render my page in IE8 mode?

13
internet-explorerinternet-explorer-8
You really want to exclude around 40-50% of the world's users? Seriously? - cletus
If I hear any more complaints from people that I'm not including IE6 and IE7, I'm also going to exclude IE8! - MikeN
There are plenty of apps that are meant for a limited audience. And in those cases you may be able to dictate the specific program and minimum version. Of course these cannot be called "web apps". I call them IE-apps, since IE is the "operating system" that they run on. - Chris Noe
Why would anyone assume that the poster is excluding 50-60-99% percent of the world's internet users? People please refrain from vague and out of focus remarks. The poster never declares a target audience/market for his web app, it's unclear if it's a web site or perhaps an intranet app that couldn't care less of the world's addiction to bad/archaic software or even a school project. Lets not discuss browser market-share and whatever our opinion is. I dont know of a conclusive technique to do what you ask (maybe a combination of some of the following answers) so I will now shut up. - yannis
@Yoooder: don't be ridiculous, everyone knows w3schools stats are MASSIVELY inaccurate of the web at large. WP is more accurate in this case: en.wikipedia.org/wiki/Usage_share_of_web_browsers - DisgruntledGoat

13 Answers

24
votes

Use this tag:

<meta http-equiv="X-UA-Compatible" content="IE=8" />
14
votes

Correction to AdamSane's example:

<!--[if lt IE 8]> Special instructions for IE 7 or less here <![endif]-->

11
votes

here is a good link that suggest some solution

http://garmahis.com/tools/ie6-update-warning/

personally i like fourth solution(http://www.browser-update.org/)

just a piece of cake

4
votes

Personally I would recommend users to upgrade IE for security reasons. I would use a conditional comment to target browsers below IE8.

      <!--[if lt IE 8]>You are using an outdated version of Internet Explorer.  For security reasons you should upgrade your browser. Please go to Windows Updates and install the latest version.<![endif]-->

This message should be unobtrusive but graceful. You should also make the website usable for those that cannot upgrade their browsers.

4
votes

Rather than try to force IE 8+ mode, I use a combination of conditional comments and a simple javascript check. The document.documentMode property was added to IE in version 8, so if it exists at all (regardless of value, though it HAS to be 7 with this code) it means we're in compatibility mode and should not show the warning:

<!--[if lte IE 7]>
    <script>
        if (!document.documentMode) { //if documentMode exists, this is a later IE in compatibility mode
            showBadBrowserMessage();
        }
    </script>
<![endif]-->
4
votes

Here is this cool script that works for all old browsers: 

<script type="text/javascript"> 
    var $buoop = {vs:{i:7,f:5,o:12,s:5,n:9}}; 
    $buoop.ol = window.onload; 
    window.onload=function(){ 
     try {if ($buoop.ol) $buoop.ol();}catch (e) {} 
     var e = document.createElement("script"); 
     e.setAttribute("type", "text/javascript"); 
     e.setAttribute("src", "//browser-update.org/update.js"); 
     document.body.appendChild(e); 
    } 
</script>

Note: If the visitor ignores the advice, it won't appear again for some time.

More can be found: here

1
votes

Depends on how you've coded your (X)HTML, but IE8 should use standards mode (not IE7 mode) if you have a strict doctype like:

<!DOCTYPE html 
    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

at the top of your HTML files.

XHTML 1.0 Specs - Strictly Conforming Documents

Here's a good post about how different doctypes/etc affect IE8's rendering mode: Understanding Compatibility Modes in Internet Explorer 8

1
votes

Probably the best way would be to detect the user's browser User-Agent string and redirect them to a page asking them to upgrade (or download a different browser such as firefox or chrome) if they are using an old version of IE. You can see examples of the user agents of IE 7 and 8 on this IE developer blog entry. Older versions of IE follow a similar pattern.

One thing you should not do, however, is assume that any user agent string not following a certain pattern is invalid. Just check for MSIE ([0-9]) and see if it's in range; if it's missing entirely, assume the browser is supported. If it's MSIE 7, then further check for the Trident marker indicating compatiblity mode (and, I suppose, ask the user to turn it off). This will allow for other, future upstart browsers to have a fighting chance at rendering your page without turning them away at the door :)

1
votes

As has been mentioned I'd suggest the best way to achieve this is to use conditional comments to include a stylesheet specific to all versions of IE earlier than 8:

<!--[if lt IE 8]> Include CSS here <![endif]-->

The included CSS could set a warning to be visible or perhaps enable an overlay on the page which 'locks' users out. It might be a good idea to include some rules which hide important elements on the page which could otherwise confuse the user if they do not work as intended.

Your other option is to redirect the user to another page - I'm not a huge fan of redirects but if used with care they can be a suitable solution.

Have you considered why you're locking a large amount of users out of your site? Maybe you should take the time to work out how to either gracefully degrade your JavaScript, or the other way around; 'progressively enhance' with JavaScript.

On the other hand, you might have control over the systems used by the organisation using your site in which case you're probably OK locking people out for using non-standard systems.

0
votes

You can use CSS Conditional Comments

<!--[if IE 8]>
Special instructions for IE 6 here
<![endif]-->
0
votes

Using javascript you can ask which browser have sent the request>

<script type="text/javascript">
function detectBrowser()
{
var browser=navigator.appName;
var b_version=navigator.appVersion;
var version=parseFloat(b_version);
if (browser=="Microsoft Internet Explorer")
  && (version>=8))
  {
  alert("Your browser is good enough!");
  }
  else
  {
  alert("It's time to upgrade your browser!");
  }
  }
 </script>
0
votes

Is this party over? ><

It is, but I think the information here can be updated a bit.

By today's standards, "today" being October 29 of 2013, you can use this meta tag to trigger the latest IE Browser and Document modes and trigger the installation of Google's Chrome Frame in older IEs:

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

This allows you to server specific IE6/7 styles. Keep in mind that I'm saying 'styles' not 'style sheets', meaning: You'd only use a single CSS file and in it are all your IE6 and IE7 styles. This is to minimize HTTP requests... but that's a totally different conversation.

Anyway, with the above snippet there's no need for scripts or Conditional Comments.

Note: Google Chrome Frame will be retired in January 2014 - more info here.

-2
votes

The very idea that you're "banning" IE 6 and 7 users from your website is ridiculous. A lot of people can't upgrade their browser or install another one because of work restrictions or because they don't know how. Barring these people from using your site will just cost you users in the long run.

Either fix your JavaScript, work around the problems or gracefully degrade so that the site will work well even if it's turned off.

EDIT: I posted some more information in a comment below which should really be in this post:

It's often possible to detect IE and work around it. Hell, you can even use conditional comments to load a different version of the JavaScript. Using a JS framework will abstract away the differences between browsers to a level you don't need to worry about. Or just grab IE7.js and stick that on the site - I hear it gets things working like you wouldn't believe.