Making Asp.net web page rendered in IE8 to work similar in IE7

This article illustrate how to make a web page developed targetting IE6 & IE7 to work in a similar fashion with IE8 browser, with minimal development effort. Actually I have put most of the tips to perform the IE 7 emulation. When my web site was used by IE 8 clients and the defects logged in, I was frustrated a lot. So I thought writing an article on this would help developers who are in a identical situation.

Making Asp.net web to emulate IE 7 in IE 8

Hello All,
After the release of different versions of IE browsers, it is always a fret for the web developers on compatibility issues. Even I was experiencing the same kind of obscurity in one of my recent projects. So I did some ground work on it and got some useful information to embark upon dealing with IE 8 compatibility issues.

Let’s get the scenario straight away,

If your asp.net web application is working fine with IE 6 & IE 7. But if you want to let the clients benefit the same functionality with IE 8 browser then you need to just do a little stuff and there are two ways of doing it.

1. Go to the IIS and spot on your website, add a HttpHeader with HeaderName as ‘X-UA-Compatible’ and value as ‘IE=EmulateIE7’







2. Add the below meta tag within the <head> tags on all the pages in your application.
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />



Based on your expediency you can opt for either of the one.

Note: While you opt for the second option always make sure that the <meta> tag gets added to the first position of the head tag and no link or script tags preceding the meta stuff.

Adding the meta tag programatically in ASP.NET:

You can add the meta tag in the OnInit event of the page as shown in the below code.

 protected override void OnInit(EventArgs e)
{
 //Always do the check before adding the meta tag
if (CheckBrowser("IE", 8))
{

HtmlMeta meta = new HtmlMeta();

meta.HttpEquiv = "X-UA-Compatible";
meta.Content = "IE=EmulateIE7";

this.Page.Header.Controls.AddAt(0, meta);

}
}

/// <summary>
/// Checks the browser.
/// </summary>
/// <param name="browserName">Name of the browser.</param>
/// <param name="browserMajorVersion">The browser major version.</param>
/// <returns></returns>
public static bool CheckBrowser(string browserName, int browserMajorVersion)
{
HttpBrowserCapabilities br = HttpContext.Current.Request.Browser;

if (br.Browser.ToUpper().Equals(browserName) && (br.MajorVersion == browserMajorVersion))
return true;
else
return false;
}

The necessity of adding the meta tag programatically is to avoid adding it when the client browser is not IE or of a different version of IE.

All this applies only to the IE 8 browsers which are not set with the Compatibility Mode. To check whether the browser is set to compatibity mode in IE 8 click on Follow the below steps

1. Click on Tools -- > Select Compatibility View Settings


2. Check whether the Compatibility mode is selected or not.


If the compatibilty mode is selected, it means that the browser is already emulating as IE 7. Even if you do

HttpContext.Current.Request.Browser.MajorVersion

the major version will be 7 and not 8.

Some more:
Also another small tip for developers who tend to develop applications targeted to multiple browsers,

Always for setting the height and width of the html elements always use

Style=”height:20px;width:20px” instead of using values directly in the height and width attribute of the html element.

For example:
Use <td style=”height:20px;width:20px”></td>
Instead of <td height=”20px” width=”20px”></td>

Hope this article helps some one, who is struggling to fix his application in IE8.


By Huggy Bear   Popularity  (2972 Views)