IE8 Compatibility Mode Asp.net Menu Padding issue

Im having an issue with an ASP.net vertical menu, where in certain IE8 modes and other IE browsers, it changes my menu item to have an extra space at the bottom of each menu item, as shown below.

(bad on left, good on right). this is only IE.

bad _____________________ good

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

enter image description here

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>

Page Generate 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>

asp.net
css

2012-04-03 22:47
by the sandman

Can you post some sample HTML for the menu please? Also, try reducing or even removing the line-height - dash 2012-04-03 22:58

i tried removing the line-height that didnt help. added my html code - the sandman 2012-04-03 23:01

Can you post the generated HTML (as in in-browser) - not being an ASP developer, the XML you've posted is meaningless to me : - Pete 2012-04-03 23:19

@Pete, added the generated code. Think the extra in it has anything to do with it - the sandman 2012-04-03 23:39

The extra <tr>s have everything to do with it. You'll need to somehow remove them - are there gaps in the data that's generating the menu - Pete 2012-04-04 00:56

there is no gaps in the data what so ever. I'm trying to find a way to dynamically remove those tags, but since they dont have an id, i am having a hard time. is there any way for me to target the fact it has height:0px? and then remove only tr's that have that style - the sandman 2012-04-04 15:25

The problem is in the markup of your <asp:Menu /> control. ItemSpacing="0" on the <StaticMenuItemStyle /> is what creates those extra <tr /> tags. Remove it and they will be gone:

<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's a screen shot of my local machine where I show it fixed:

enter image description here

2012-04-06 16:05
by Code Maverick

BAM! this fixed it. Wow something so simple overlooked. Thanks Scott, i will award you the bounty once it lets me(says 7 hours remaining). Thank - the sandman 2012-04-06 16:15

No problem at all. The funny thing is that I overlooked it too. I was trying to play with the CSS and generated HTML you posted to no avail. Then I said it has to be a setting in the Menu itself generating those <tr /> tags. It would make no sense for them to be there otherwise. So I just built the <asp:Menu /> myself with what you posted and sure enough the first thing I did was remove that ItemSpacing="0" and like you said, BAM! they were gone - Code Maverick 2012-04-06 16:23

sweet. thanks again - the sandman 2012-04-06 16:28

@thesandman - No problem at all! Oh, and don't forget to award the bounty points = - Code Maverick 2012-04-09 14:46

done good sir! sorry, i was out of town all weekend - the sandman 2012-04-09 15:29

There are some extra TR and TD tags between those tags that actually contain the text. If you remove those, you should be ok

2012-04-04 00:00
by Ray

hmm, looks like that is generated from the asp.net menu and not in the code itself, i'll have to see if i can somehow manually remove those someho - the sandman 2012-04-04 00:02

i couldnt figure out a way to only remove those tags since they dont have an id - the sandman 2012-04-04 15:25

tr[style]
{ display:none !important; } since all your tags that have no IDs have a style attribute, you could use that tag to make sure they won't be displayed. However that selector is not supported in IE7. It will most likely deal with your IE8 and above problems - Ray 2012-04-04 21:48

Ray, i tried your solution, but to no avail. it did not remove the extra tag - the sandman 2012-04-05 17:33