IE8 Compatibility Mode

Question

I have a problem with the ASP.net vertical menu, where in some IE8 modes and other IE browsers it changes its menu item to have extra space at the bottom of each menu item, as shown below.

(bad left, good right). it is only IE.

_____________________

I did margin: -1px; for the bottom and top and got the following and still adds space as shown below.

here is my CSS:

.SideStaticMenuStyle a, .SideStaticMenuStyle a:visited, .SideStaticMenuStyle a:active { color: #000000; text-decoration: none; font-weight: normal; font-family: verdana; font-size: 12px; white-space:normal; } .SideStaticMenuStyle a:hover { color: #ffffff; text-decoration: none; font-size: 12px; font-weight: normal; font-family: verdana; } .SideStaticMenuStyle td { background-color: #c2d0e9; width: 160px; line-height:14px; } .SideStaticSelectedStyle td, .SideStaticSelectedStyle a, .SideStaticSelectedStyle a:visited, .SideStaticSelectedStyle a:active, .SideStaticSelectedStyle a:hover { color: #ffffff; text-decoration: none; font-weight: bold; font-family: verdana; font-size: 11px; white-space:normal; background-color: #6C85B0; } .SideStaticHoverStyle td { font-weight: normal; font-family: verdana; background-color: #6c85b0; color: #ffffff; } .SideStaticHoverStyle td:hover a { color: #ffffff; } .SideStaticMenuItemStyle { font-weight: normal; font-family: verdana; border-bottom: solid 1px #012754; border-left: solid 1px #012754; border-right: solid 1px #012754; border-collapse:collapse; } .SideStaticMenuItemStyle td { padding: 2px 2px 2px 3px; text-align: left; font-weight: normal; font-family: verdana; } .SideStaticHoverStyle { font-weight: normal; font-family: verdana; } 

Here is my HTML:

 <asp:Menu ID="Menu2" runat="server" Orientation="Vertical" ItemWrap="true"> <DataBindings> <asp:MenuItemBinding DataMember="MenuItem" TextField="Title" NavigateUrlField="URL" /> </DataBindings> <StaticMenuStyle CssClass="SideStaticMenuStyle" /> <StaticSelectedStyle CssClass="SideStaticSelectedStyle" ItemSpacing="0px" /> <StaticMenuItemStyle CssClass="SideStaticMenuItemStyle" ItemSpacing="0px" /> <DynamicHoverStyle CssClass="SideDynamicHoverStyle" /> <DynamicMenuStyle CssClass="SideDynamicMenuStyle" /> <DynamicSelectedStyle CssClass="SideDynamicSelectedStyle" /> <DynamicMenuItemStyle CssClass="SideDynamicMenuItemStyle" /> <StaticHoverStyle CssClass="SideStaticHoverStyle" /> </asp:Menu> 

Create Code:

  <table id="ctl00_ContentPlaceHolder1_ctl00_ctl06_ctl00_Menu2" class="SideStaticMenuStyle ctl00_ContentPlaceHolder1_ctl00_ctl06_ctl00_Menu2_5 ctl00_ContentPlaceHolder1_ctl00_ctl06_ctl00_Menu2_2" cellpadding="0" cellspacing="0" border="0"> <tr onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" id="ctl00_ContentPlaceHolder1_ctl00_ctl06_ctl00_Menu2n1"> <td><table class="SideStaticMenuItemStyle ctl00_ContentPlaceHolder1_ctl00_ctl06_ctl00_Menu2_4" cellpadding="0" cellspacing="0" border="0" width="100%"> <tr> <td style="width:100%;"><a class="ctl00_ContentPlaceHolder1_ctl00_ctl06_ctl00_Menu2_1 SideStaticMenuItemStyle ctl00_ContentPlaceHolder1_ctl00_ctl06_ctl00_Menu2_3" href="servicelink.aspx" target="_self" style="border-style:none;font-size:1em;">ServiceLink</a></td> </tr> </table></td> </tr><tr style="height:0px;"> <td></td> </tr><tr style="height:0px;"> <td></td> </tr><tr onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" id="ctl00_ContentPlaceHolder1_ctl00_ctl06_ctl00_Menu2n2"> <td><table class="SideStaticMenuItemStyle ctl00_ContentPlaceHolder1_ctl00_ctl06_ctl00_Menu2_4" cellpadding="0" cellspacing="0" border="0" width="100%"> <tr> <td style="width:100%;"><a class="ctl00_ContentPlaceHolder1_ctl00_ctl06_ctl00_Menu2_1 SideStaticMenuItemStyle ctl00_ContentPlaceHolder1_ctl00_ctl06_ctl00_Menu2_3" href="fnpc.aspx" target="_self" style="border-style:none;font-size:1em;">Fidelity National Property and Casualty</a></td> </tr> </table></td> </tr><tr style="height:0px;"> <td></td> </tr><tr style="height:0px;"> <td></td> </tr><tr onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" id="ctl00_ContentPlaceHolder1_ctl00_ctl06_ctl00_Menu2n3"> <td><table class="SideStaticMenuItemStyle ctl00_ContentPlaceHolder1_ctl00_ctl06_ctl00_Menu2_4" cellpadding="0" cellspacing="0" border="0" width="100%"> <tr> <td style="width:100%;"><a class="ctl00_ContentPlaceHolder1_ctl00_ctl06_ctl00_Menu2_1 SideStaticMenuItemStyle ctl00_ContentPlaceHolder1_ctl00_ctl06_ctl00_Menu2_3" href="ceridiancorp.aspx" target="_self" style="border-style:none;font-size:1em;">Ceridian Corporation</a></td> </tr> </table></td> </tr><tr style="height:0px;"> <td></td> </tr><tr style="height:0px;"> <td></td> </tr><tr onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" id="ctl00_ContentPlaceHolder1_ctl00_ctl06_ctl00_Menu2n4"> <td><table class="SideStaticMenuItemStyle ctl00_ContentPlaceHolder1_ctl00_ctl06_ctl00_Menu2_4" cellpadding="0" cellspacing="0" border="0" width="100%"> <tr> <td style="width:100%;"><a class="ctl00_ContentPlaceHolder1_ctl00_ctl06_ctl00_Menu2_1 SideStaticMenuItemStyle ctl00_ContentPlaceHolder1_ctl00_ctl06_ctl00_Menu2_3" href="remy.aspx" target="_self" style="border-style:none;font-size:1em;">Remy International, Inc.</a></td> </tr> </table></td> </tr><tr style="height:0px;"> <td></td> </tr><tr style="height:0px;"> <td></td> </tr><tr onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" id="ctl00_ContentPlaceHolder1_ctl00_ctl06_ctl00_Menu2n5"> <td><table class="SideStaticMenuItemStyle ctl00_ContentPlaceHolder1_ctl00_ctl06_ctl00_Menu2_4" cellpadding="0" cellspacing="0" border="0" width="100%"> <tr> <td style="width:100%;"><a class="ctl00_ContentPlaceHolder1_ctl00_ctl06_ctl00_Menu2_1 SideStaticMenuItemStyle ctl00_ContentPlaceHolder1_ctl00_ctl06_ctl00_Menu2_3" href="abrh.aspx" target="_self" style="border-style:none;font-size:1em;">American Blue Ribbon Holdings, LLC</a></td> </tr> </table></td> </tr><tr style="height:0px;"> <td></td> </tr><tr style="height:0px;"> <td></td> </tr><tr onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" id="ctl00_ContentPlaceHolder1_ctl00_ctl06_ctl00_Menu2n6"> <td><table class="SideStaticMenuItemStyle ctl00_ContentPlaceHolder1_ctl00_ctl06_ctl00_Menu2_4" cellpadding="0" cellspacing="0" border="0" width="100%"> <tr> <td style="width:100%;"><a class="ctl00_ContentPlaceHolder1_ctl00_ctl06_ctl00_Menu2_1 SideStaticMenuItemStyle ctl00_ContentPlaceHolder1_ctl00_ctl06_ctl00_Menu2_3" href="cascade.aspx" target="_self" style="border-style:none;font-size:1em;">Cascade Timberlands</a></td> </tr> </table></td> </tr><tr style="height:0px;"> <td></td> </tr> </table><a id="ctl00_ContentPlaceHolder1_ctl00_ctl06_ctl00_Menu2_SkipLink"></a> </td> = "SideStaticMenuStyle ctl00_ContentPlaceHolder1_ctl00_ctl06_ctl00_Menu2_5 ctl00_ContentPlaceHolder1_ctl00_ctl06_ctl00_Menu2_2" cellpadding = "  <table id="ctl00_ContentPlaceHolder1_ctl00_ctl06_ctl00_Menu2" class="SideStaticMenuStyle ctl00_ContentPlaceHolder1_ctl00_ctl06_ctl00_Menu2_5 ctl00_ContentPlaceHolder1_ctl00_ctl06_ctl00_Menu2_2" cellpadding="0" cellspacing="0" border="0"> <tr onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" id="ctl00_ContentPlaceHolder1_ctl00_ctl06_ctl00_Menu2n1"> <td><table class="SideStaticMenuItemStyle ctl00_ContentPlaceHolder1_ctl00_ctl06_ctl00_Menu2_4" cellpadding="0" cellspacing="0" border="0" width="100%"> <tr> <td style="width:100%;"><a class="ctl00_ContentPlaceHolder1_ctl00_ctl06_ctl00_Menu2_1 SideStaticMenuItemStyle ctl00_ContentPlaceHolder1_ctl00_ctl06_ctl00_Menu2_3" href="servicelink.aspx" target="_self" style="border-style:none;font-size:1em;">ServiceLink</a></td> </tr> </table></td> </tr><tr style="height:0px;"> <td></td> </tr><tr style="height:0px;"> <td></td> </tr><tr onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" id="ctl00_ContentPlaceHolder1_ctl00_ctl06_ctl00_Menu2n2"> <td><table class="SideStaticMenuItemStyle ctl00_ContentPlaceHolder1_ctl00_ctl06_ctl00_Menu2_4" cellpadding="0" cellspacing="0" border="0" width="100%"> <tr> <td style="width:100%;"><a class="ctl00_ContentPlaceHolder1_ctl00_ctl06_ctl00_Menu2_1 SideStaticMenuItemStyle ctl00_ContentPlaceHolder1_ctl00_ctl06_ctl00_Menu2_3" href="fnpc.aspx" target="_self" style="border-style:none;font-size:1em;">Fidelity National Property and Casualty</a></td> </tr> </table></td> </tr><tr style="height:0px;"> <td></td> </tr><tr style="height:0px;"> <td></td> </tr><tr onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" id="ctl00_ContentPlaceHolder1_ctl00_ctl06_ctl00_Menu2n3"> <td><table class="SideStaticMenuItemStyle ctl00_ContentPlaceHolder1_ctl00_ctl06_ctl00_Menu2_4" cellpadding="0" cellspacing="0" border="0" width="100%"> <tr> <td style="width:100%;"><a class="ctl00_ContentPlaceHolder1_ctl00_ctl06_ctl00_Menu2_1 SideStaticMenuItemStyle ctl00_ContentPlaceHolder1_ctl00_ctl06_ctl00_Menu2_3" href="ceridiancorp.aspx" target="_self" style="border-style:none;font-size:1em;">Ceridian Corporation</a></td> </tr> </table></td> </tr><tr style="height:0px;"> <td></td> </tr><tr style="height:0px;"> <td></td> </tr><tr onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" id="ctl00_ContentPlaceHolder1_ctl00_ctl06_ctl00_Menu2n4"> <td><table class="SideStaticMenuItemStyle ctl00_ContentPlaceHolder1_ctl00_ctl06_ctl00_Menu2_4" cellpadding="0" cellspacing="0" border="0" width="100%"> <tr> <td style="width:100%;"><a class="ctl00_ContentPlaceHolder1_ctl00_ctl06_ctl00_Menu2_1 SideStaticMenuItemStyle ctl00_ContentPlaceHolder1_ctl00_ctl06_ctl00_Menu2_3" href="remy.aspx" target="_self" style="border-style:none;font-size:1em;">Remy International, Inc.</a></td> </tr> </table></td> </tr><tr style="height:0px;"> <td></td> </tr><tr style="height:0px;"> <td></td> </tr><tr onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" id="ctl00_ContentPlaceHolder1_ctl00_ctl06_ctl00_Menu2n5"> <td><table class="SideStaticMenuItemStyle ctl00_ContentPlaceHolder1_ctl00_ctl06_ctl00_Menu2_4" cellpadding="0" cellspacing="0" border="0" width="100%"> <tr> <td style="width:100%;"><a class="ctl00_ContentPlaceHolder1_ctl00_ctl06_ctl00_Menu2_1 SideStaticMenuItemStyle ctl00_ContentPlaceHolder1_ctl00_ctl06_ctl00_Menu2_3" href="abrh.aspx" target="_self" style="border-style:none;font-size:1em;">American Blue Ribbon Holdings, LLC</a></td> </tr> </table></td> </tr><tr style="height:0px;"> <td></td> </tr><tr style="height:0px;"> <td></td> </tr><tr onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" id="ctl00_ContentPlaceHolder1_ctl00_ctl06_ctl00_Menu2n6"> <td><table class="SideStaticMenuItemStyle ctl00_ContentPlaceHolder1_ctl00_ctl06_ctl00_Menu2_4" cellpadding="0" cellspacing="0" border="0" width="100%"> <tr> <td style="width:100%;"><a class="ctl00_ContentPlaceHolder1_ctl00_ctl06_ctl00_Menu2_1 SideStaticMenuItemStyle ctl00_ContentPlaceHolder1_ctl00_ctl06_ctl00_Menu2_3" href="cascade.aspx" target="_self" style="border-style:none;font-size:1em;">Cascade Timberlands</a></td> </tr> </table></td> </tr><tr style="height:0px;"> <td></td> </tr> </table><a id="ctl00_ContentPlaceHolder1_ctl00_ctl06_ctl00_Menu2_SkipLink"></a> </td> 

Answer 1

The problem is marking up your <asp:Menu /> control. ItemSpacing="0" on <StaticMenuItemStyle /> is what creates those extra <tr /> tags. Remove it and they will disappear:

 <asp:Menu ID="Menu2" runat="server" Orientation="Vertical" ItemWrap="true"> <DataBindings> <asp:MenuItemBinding DataMember="MenuItem" TextField="Title" NavigateUrlField="URL" /> </DataBindings> <StaticMenuStyle CssClass="SideStaticMenuStyle" /> <StaticSelectedStyle CssClass="SideStaticSelectedStyle" /> <StaticMenuItemStyle CssClass="SideStaticMenuItemStyle" /> <DynamicHoverStyle CssClass="SideDynamicHoverStyle" /> <DynamicMenuStyle CssClass="SideDynamicMenuStyle" /> <DynamicSelectedStyle CssClass="SideDynamicSelectedStyle" /> <DynamicMenuItemStyle CssClass="SideDynamicMenuItemStyle" /> <StaticHoverStyle CssClass="SideStaticHoverStyle" /> </asp:Menu> 

Here is a screenshot of my local machine where I am showing the fix:

Answer 2

There are several additional TR and TD tags between these tags that actually contain text. If you delete them, you should be fine.