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.
_____________________
i did a margin: -1px; for bottom and top and got the following and still adds the 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>
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>
<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
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:
<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
There are some extra TR and TD tags between those tags that actually contain the text. If you remove those, you should be ok