ASP.NET 4.01 Controls Lose all Formatting in IE10

I’ve been running compatibility tests of IE10 with Web pages written in Visual Studio 2010 and .NET 4.01

I’ve found that IE10 tends to completely lose any formatting on .NET controls so that all control dimensions revert to the default. This can’t be fixed by setting compatibility mode to an earlier IE version. Clearly there’s something strange happening here with IE10 and ASP.NET 4.01

If  you find this article useful, then follow this link to read about other issues with Internet Explorer that I have written about.

Why .NET 4.01 Controls Lose Formatting in IE10

Microsoft explains this as a known issue where the ASP.NET browser definition files do not cover IE10, and treat it as an unknown browser. This explains some of the strange behavior I have seen when testing IE10 with ASP.NET 4.01 sites.

Microsoft has released a hotfix to update the ASP.NET browser definition files. These are explained further and are linked to at: http://support.microsoft.com/kb/2600088

Microsoft says it will include this hotfix in an upcoming Windows update. I don’t know if they have done so or not, but I am still experiencing it on servers that are hosting my .NET 4.01 code.

Manually Applying the Hotfix

When I tested manually applying this hotfix, it worked without any problems, and styles for controls began rendering in IE10. Even though the Microsoft indicates that this hotfix will require a server restart, I did not find this to be the case. When I ran the patch everything just seemed to click.

Sometimes, though, one will not have the luxury of being able to log onto the server and of applying the patch oneself. Sadly I’d say this is the case more often than not, depending on what your permissions are for the Web server on which your project resides.

In this case another work-around was needed to fix the formatting issue.

Here is an example of an IE10 / .NET 4.01 rendering problem:

Before looking into the fix for the formatting issue, I had to take a look into what the .NET engine was serving to the client browser behind the scenes. Here is what I found it was doing for a Multi-Line textbox control:

This was the code-behind for the Multi-Line TextBox

<asp:textbox 
TextMode="MultiLine"
Width="200" 
Height="20"

This would then be translated in HTML for IE10 into:

<textarea 
rows="2" cols="20"

However for IE8, the HTML is translated to:

<textarea 
rows="2" cols="20"
style="width:200px;height:20px;"

As you can see, with IE10 the style translation was completely dropped and only the default rows and cols were set.

Let’s say you can’t install the Microsoft hotfix to correct this error. How do you work around the rendering error?

In the case of the textarea, you need to specifically set the style for height and width. So rather than writing:

<asp:textbox 
TextMode="MultiLine"
Width="200" 
Height="20"

you just need to write

<asp:textbox 
TextMode="MultiLine"
style="width:266px;height:20px;"

This corrects the textarea rendering problem. You can similarly fix single line textboxes using the same technique… just leave out the height style:

<asp:textbox 
style="width:266px;"

The same holds true for all .NET controls and the style attributes that you set in them. You will need to set them directly to the CSS style attribute or to a CSS class. In my opinion this is reasonably robust and future-proof, although it is not ideal .NET syntax. Still, I have no objection to setting styles directly this way to get your pages back to rendering correctly. These style settings will continue regardless of whether someone applies the Microsoft hotfix or not, or if a new IE version comes out that isn’t covered in this patch.

So to illustrate, a label control that used to be set as follows:

<asp:Label ID="Label1" runat="server" Text="My Label Text" Font-Names="verdanna" Font-Size="Small" Font-Bold="true"></asp:Label>

Will now have to be set like this:

<asp:Label ID="Label1" runat="server" Text="My Label Text" style="font-family:verdanna;font-size:Small;font-weight:bold;"></asp:Label>