Asp:Menu not working as expected in IE 6 . but working Fine in IE 7 and above

Question

below in My Menu control code in my aspx page

<table width="100%" cellpadding="0" cellspacing="0" style="background-color: Black; height: 30px; ">
        <tr style="background-color: Black; height: 30px;">
            <td  style="background-color: Black; width: 100%; height: 30px;">
            <div style="height:30px">
                <asp:Menu ID="NavigationMenu" runat="server" EnableViewState="false" RenderingMode="Default" CssClass="menu" ForeColor="White"
                    IncludeStyleBlock="false" Orientation="Horizontal" Height="30px" OnMenuItemClick="NavigationMenu_MenuItemClick" >
                    <StaticMenuItemStyle CssClass="menuitem" />
                    <DynamicMenuItemStyle CssClass="menuitem" />
                    <Items>
                        <asp:MenuItem NavigateUrl="~/Home.aspx" Text="Home" ToolTip="Home page" />
                        <asp:MenuItem NavigateUrl="~/CommonUser.aspx" Text="Create / Edit User Access" ToolTip="Provide access to users" />
                        <asp:MenuItem NavigateUrl="~/BulkUpload.aspx" Text="Bulk Upload" ToolTip="To bulk upload users " />
                        <asp:MenuItem NavigateUrl="~/SearchUser.aspx" Text="View / Revoke User Access" ToolTip="View existing users access" />

                        <asp:MenuItem Text="Admin" NavigateUrl="javascript:void(0);">
                            <asp:MenuItem NavigateUrl="javascript:void(0);" Text="User" ToolTip="Create / Edit User for the application">
                                <asp:MenuItem Text="Create User" NavigateUrl="~/AdminUser.aspx" />
                                <asp:MenuItem Text="Edit User" NavigateUrl="~/EditAdminUser.aspx" />
                            </asp:MenuItem>
                            <asp:MenuItem Text="Template" NavigateUrl="javascript:void(0);">
                                <asp:MenuItem Text="Create Template" />
                                <asp:MenuItem Text="Edit Template" />
                            </asp:MenuItem>
                            <asp:MenuItem NavigateUrl="javascript:void(0);" Text="Server" ToolTip="Add / Edit server Details">
                                <asp:MenuItem Text="Add Server" NavigateUrl="~/AddServers.aspx" />
                                <asp:MenuItem Text="Edit Server" NavigateUrl="~/EditServer.aspx" />
                            </asp:MenuItem>
                            <asp:MenuItem NavigateUrl="~/CreateConString.aspx" Text="Environment Password" ToolTip="Change password for connection string" />
                        </asp:MenuItem>

                    </Items>
                </asp:Menu>
                </div>
            </td>
        </tr>
    </table>

I have 2 issues

1. I am unable to Select sub-menus. they are getting displayed but not able to select.it. once i move my mouse over to sub-menu the sub-menu disappears
2. the Menu moves To left of the screen on maximizing the window. on Mouse over event the menu aligns properly

Below is the code is if view it in IE view Source

<table width="100%" cellpadding="0" cellspacing="0" style="background-color: Black; height: 30px; ">
        <tr style="background-color: Black; height: 30px;">
            <td  style="background-color: Black; width: 100%; height: 30px;">
            <div style="height:30px">
                <a href="#NavigationMenu_SkipLink"><img alt="Skip Navigation Links" src="/FacetsUserSetupApp/WebResource.axd?d=E02KDPXufVQc2nUrHjGfkA2&amp;t=634836496018543211" width="0" height="0" style="border-width:0px;" /></a><div class="menu" id="NavigationMenu">
    <ul class="level1">
        <li><a title="Home page" class="level1 menuitem" href="Home.aspx">Home</a></li><li><a title="Provide access to users" class="level1 menuitem" href="CommonUser.aspx">Create / Edit User Access</a></li><li><a title="To bulk upload users " class="level1 menuitem" href="BulkUpload.aspx">Bulk Upload</a></li><li><a title="View existing users access" class="level1 menuitem" href="SearchUser.aspx">View / Revoke User Access</a></li><li><a class="popout level1 menuitem" href="javascript:void(0);">Admin</a><ul class="level2">
            <li><a title="Create / Edit User for the application" class="popout level2 menuitem" href="javascript:void(0);">User</a><ul class="level3">
                <li><a class="level3 menuitem" href="AdminUser.aspx">Create User</a></li><li><a class="level3 menuitem" href="EditAdminUser.aspx">Edit User</a></li>
            </ul></li><li><a class="popout level2 menuitem" href="javascript:void(0);">Template</a><ul class="level3">
                <li><a class="level3 menuitem" href="#" onclick="__doPostBack(&#39;ctl00$NavigationMenu&#39;,&#39;Admin\\Template\\Create Template&#39;)">Create Template</a></li><li><a class="level3 menuitem" href="#" onclick="__doPostBack(&#39;ctl00$NavigationMenu&#39;,&#39;Admin\\Template\\Edit Template&#39;)">Edit Template</a></li>
            </ul></li><li><a title="Add / Edit server Details" class="popout level2 menuitem" href="javascript:void(0);">Server</a><ul class="level3">
                <li><a class="level3 menuitem" href="AddServers.aspx">Add Server</a></li><li><a class="level3 menuitem" href="EditServer.aspx">Edit Server</a></li>
            </ul></li><li><a title="Change password for connection string" class="level2 menuitem" href="CreateConString.aspx">Environment Password</a></li>
        </ul></li>
    </ul>
</div><a id="NavigationMenu_SkipLink"></a>
                </div>
            </td>
        </tr>
    </table>

I am not sure of how to use renderingcompatibility property for A control. can any one Please help me on declaring the same for a menu control

Answer 1

With every version of ASP.NET, the control might output different HTML. Usually, this hasn't been too big of a problem, and all ASP.NET versions seem to have worked with IE6. IE6 was the dominant browser when ASP.NET 1 and 1.1 were launched, and probably even when ASP.NET 2 was released.

But now, with ASP.NET 4, Microsoft have modernized the HTML, to be more in line with current standards (less tables, more div, ul, li, etc). This makes sense, as now all popular browsers support these tags for nice layouts. Even Internet Explorer, having moved away from IE6.

This creates a backwards compatibility problem if you're site still has to support IE6, but you need or want the ASP.NET 4 features (like a lot on company intranet websites). So Microsoft introduced the ControlRenderingCompatibilityVersion property for you web.config and the RenderingCompatibility property for your controls.

I'd say give those a go. Set the RenderingCompatibility property of your menu to version 3.5 and see how that makes a difference.

There is however a case to be made to drop support for IE6. Even if your client currently still uses IE6, how long will it last? With security, speed, support and other implications, there are compelling reasons to upgrade the browser.