asp.netinternet-explorer-11internet-explorer-10aspmenuaspmenu-control

ASP:Menu not shown correctly in IE10 and IE11, but looks aliright in Chrome, FF and till IE9

I am using a asp:Menu control to create a tabbed navigation. The project was created in .Net 4.0.

The following is used to create tabs:

<div class="tabmenustyle displayblock">
    <asp:Menu ID="_TabMenu" runat="server" Orientation="Horizontal">
    </asp:Menu>
</div>

This is creating the tabbed structure properly in all browsers except IE10,IE11.

The actual tabs look like this properly in the mentioned browser:

Image for Expected (as seen in IE8,Chrome,FF)

But in IE10 and IE11 the tabs are not displayed. The links are there if carefully observed, but with the following problems:

  1. They are barely visible. They are put behind the text instead of as tabs.
  2. Basically, the tabs are not created.

Image for Tabs in IE11

I have tried the following:

  1. Adding the meta http-equiv="X-UA-Compatible" content="IE=7,8" tag.
  2. Adding .browser files for compatibility to App_Browser file.
  3. Migrate all projects in the solution to .Net framework 4.5.2 from 4.0.
  4. Applying a z-index CSS property to the asp:menu control.
  5. Also tried setting the Page.ClientTarget to "uplevel" in Page_Load. To no avail.

I am at my wits' end. What all should I try to make it show properly in IE10 or IE11.

Edit: Additional details - What I observed is that when the browser is IE10 or IE11, the HTML sent to the browser is a table. But for all others, a < ul > is sent with < li > as navigation menu items. What could be the reason that IE10 or IE11 are sent different HTML.

Solution

  • Final after trying a multitude of solutions, I again tried to pinpoint the problem. Adding the .browser file in the App_Browser should have worked earlier. The reason was because it was overriding the base .Net definitions when I added my own IE11 or IE10 specific definitions browser files.

    The key was to use the refId to refer IE11 or IE10 at the project level app.browser and keep the value of refID equal to the Id used in the browser file located at c:\Windows\Microsoft.NET\Framework\v4.0.30319\Config\Browsers. This adds rules over and above the existing ones. Otherwise, it simply overrides the existing definitions.