IE8 Compatibility View breaks asp:menu

Question

I need to have my ASP.NET web application support both 8 and prior versions of the IE browser. However, when I click the "broken page" button on my IE8 address bar to switch to Compatibilty View, menu background images are cropped, there is a vertical gap between two menus and a gap between my asp:menu bar and a navigation user control above it.

Regular IE8 view:

Compatibility View:

The general format of each menu is:

<asp:TableCell ID="tcFurnMenuSectls" runat="server">
    <asp:Menu ID="menuFurnSectls" runat="server" StaticDisplayLevels="1" MaximumDynamicDisplayLevels="1"
        Orientation="Horizontal"
        CssClass="FurnMenuSectionals" StaticMenuItemStyle-ItemSpacing="0px"
        DynamicMenuItemStyle-CssClass="FurnMenuDynamicItem"
        StaticMenuItemStyle-CssClass="FurnMenuStaticItem"
        DynamicHoverStyle-CssClass="FurnMenuDynamicItemHover"
        DynamicVerticalOffset="0"
        StaticHoverStyle-CssClass="FurnMenuStaticItemHoverSectls"
        StaticEnableDefaultPopOutImage="false"
        DynamicPopOutImageUrl="~/Images/AppMenu/menu_arrow_grey.gif" DynamicMenuItemStyle-VerticalPadding="2" 
        DisappearAfter="0" OnMenuItemClick="menuFurn_MenuItemClick">
        <Items>
            <asp:MenuItem Text="Sectionals&nbsp;&nbsp;&nbsp;&nbsp;" ImageUrl="~/Images/AppMenu/FurnMenuGradientTransparent.png" Selectable="false">
                <asp:MenuItem Text="Options&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"
                    Value="Sectionals_Options" NavigateUrl="~/FurnMain.aspx?_page=OptsSectl&_title=SectionalOptions">
                </asp:MenuItem>
                <asp:MenuItem
                    Text="Latest deals&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"
                    Value="Sectionals_Deals"
                    NavigateUrl="~/FurnMain.aspx?_page=DealsSectl&_title=SectionalDeals"></asp:MenuItem>
            </asp:MenuItem>
        </Items>
    </asp:Menu>
</asp:TableCell>

If I select View -> Source, save the generated HTML and compare the two results, the only difference is in a property of the upper ("Client Home") user control:

<table id="topNavCtrl_menuTopNav" class="TopNavMenu topNavCtrl_menuTopNav_2" cellpadding="0" cellspacing="0" border="0" style="margin-top:-2px;">

In the "compatibility" version, margin-top is -3px, instead of -2.

Answer 1

What you see is IE7 rendering of the page, which obviously breaks a few things. You should be able to fix most of these issues using simple CSS tricks/hacks, such as specifying "zoom: 1", margins and "position:relative" for problematic elements. If those things fail (or break IE8), considering creating IE7 specific CSS stylesheet. Make sure to use IE Developer Tools to aid in testing.

More useful information can be found here.

Answer 2

Or if you don't need compatiblity with IE7, you can hide the button by using X-UA-Compatible with the value IE=8.