Remove extra white space in asp.net dynamic menu

Dynamic menu appears correctly from a file named MenuTest.aspx. Dynamic menu items are separated by white spaced when the menu is rendered from Site.Master.

Rendered correctly:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="MenuTest.aspx.cs"
     Inherits="StockProMax.MenuTest" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Main Menu Page </title>
</head>
<body>
    <form id="form1" runat="server">
        Main Menu Page
        <br />
    <div>
   
        <asp:Menu ID="Menu1" runat="server"
            Orientation="Horizontal"
            CssClass="Menu"
            RenderingMode="Table"
            DynamicMenuItemStyle-ItemSpacing="2px"
            DynamicMenuStyle-BackColor="White"
            DynamicHorizontalOffset="2"
            DynamicMenuItemStyle-BackColor="Yellow"
            DynamicMenuItemStyle-VerticalPadding="1px"
            DynamicMenuStyle-BorderStyle="Solid"
            DynamicMenuStyle-HorizontalPadding="1px"
            DynamicMenuStyle-VerticalPadding="1px"
            DynamicSelectedStyle-BackColor="Lime"
            DynamicVerticalOffset="1"  
            IncludeStyleBlock="False"
            MaximumDynamicDisplayLevels="2"
            DisappearAfter="-1"
            Height="16px" Width="100px">
           
            <Items>
            <asp:MenuItem NavigateUrl="#" Text="Basics" Value="mnuBasics">
                <asp:MenuItem
                    NavigateUrl="Default.aspx" Text="Home" Value="mnuHome" >
                </asp:MenuItem>
                   
                <asp:MenuItem
                    NavigateUrl="ContactUs.aspx" Text="Contact Us" Value="mnuContactUs">
                </asp:MenuItem>

            </asp:MenuItem>
                   
            <asp:MenuItem NavigateUrl="#" Text="Features" Value="mnuFeatures">
                <asp:MenuItem
                    NavigateUrl="BestPicks.aspx" Text="Best Picks(Registered Users)" Value="mnuBestPicks">
                </asp:MenuItem>
                   
                <asp:MenuItem
                    NavigateUrl="FinanceTermsDefn.aspx" Text="Finance Terms" Value="mnuFinanceTerms">
                </asp:MenuItem>
 
            </asp:MenuItem>
               
            <asp:MenuItem NavigateUrl="#" Text="Registration" Value="mnuRegistration">
                   
                <asp:MenuItem
                    NavigateUrl="RenewSubscription.aspx" Text="Renew Subscription" Value="mnuRenew">
                </asp:MenuItem>

                <asp:MenuItem
                    NavigateUrl="RegisterFree.aspx" Text="Free Trial" Value="mnuFreeTrial">
                </asp:MenuItem>
                   
                <asp:MenuItem
                    NavigateUrl="ReplacePassword.aspx" Text="Replace Password" Value="mnuReplacePassword">
                </asp:MenuItem>

                <asp:MenuItem
                    NavigateUrl="ChangePassword.aspx" Text="Change Password" Value="mnuChangePassword">
                </asp:MenuItem>
            </asp:MenuItem>
               
            <asp:MenuItem NavigateUrl="#" Text="Site Usage Help" Value="mnuSiteHelp">
                <asp:MenuItem
                    NavigateUrl="ChangePasswordInstructions.aspx" Text="Password Change Help" Value="mnuChangePasswordHelp">
                </asp:MenuItem>
            </asp:MenuItem>

            <asp:MenuItem NavigateUrl="#" Text="Admin Only" Value="mnuAdminOnly">
                <asp:MenuItem
                    NavigateUrl="Admin/AdminMenu.aspx" Text="Admin Menu" Value="mnuAdminMenu">
                </asp:MenuItem>
                   
            </asp:MenuItem>
                 
            </Items>
       
       </asp:Menu>

    </div>
    </form>
</body>
</html>

Site.Master Renders Extra White Space:

 <header>
        <div class="content-wrapper">
            <div class="float-left">
                <p class="site-title">
                    <asp:Image ID="Image2" runat="server" ImageUrl="~/Images/StockProLogo.jpg" />
                </p>
            </div>
           
            <div>  
                <asp:Menu ID="Menu1" runat="server"
                    Orientation="Horizontal"
                    CssClass="Menu"
                    RenderingMode="Table"
                    DynamicMenuItemStyle-ItemSpacing="2px"
                    DynamicMenuStyle-BackColor="White"
                    DynamicHorizontalOffset="2"
                    DynamicMenuItemStyle-BackColor="Yellow"
                    DynamicMenuItemStyle-VerticalPadding="1px"
                    DynamicMenuStyle-BorderStyle="Solid"
                    DynamicMenuStyle-HorizontalPadding="1px"
                    DynamicMenuStyle-VerticalPadding="1px"
                    DynamicSelectedStyle-BackColor="Lime"
                    DynamicVerticalOffset="0"  
                    IncludeStyleBlock="False"
                    MaximumDynamicDisplayLevels="2"
                    DisappearAfter="-1"
                    Height="16px" Width="100px"
                    class="auto-style1" style="width: auto; height: 24px;
                    font-family: Arial, Helvetica, sans-serif;
                    font-size: 14px; font-weight: bold; font-style: normal;
                    font-variant: normal; color: #0000FF; background-color: #FFFF00;
                    text-align: center;">
               
                        <Items>
                            <asp:MenuItem NavigateUrl="#" Text="Basics" Value="mnuBasics">
                                <asp:MenuItem
                                    NavigateUrl="Default.aspx" Text="Home" Value="mnuHome" >
                                </asp:MenuItem>
                   
                                <asp:MenuItem
                                    NavigateUrl="ContactUs.aspx" Text="Contact Us" Value="mnuContactUs">
                                </asp:MenuItem>

                            </asp:MenuItem>
                   
                            <asp:MenuItem NavigateUrl="#" Text="Features" Value="mnuFeatures">
                                <asp:MenuItem
                                    NavigateUrl="BestPicks.aspx" Text="Best Picks(Registered Users)" Value="mnuBestPicks">
                                </asp:MenuItem>
                   
                                <asp:MenuItem
                                    NavigateUrl="FinanceTermsDefn.aspx" Text="Finance Terms" Value="mnuFinanceTerms">
                                </asp:MenuItem>
 
                            </asp:MenuItem>
               
                           <asp:MenuItem NavigateUrl="#" Text="Registration" Value="mnuRegistration">
                   
                                <asp:MenuItem
                                    NavigateUrl="RenewSubscription.aspx" Text="Renew Subscription" Value="mnuRenew">
                                </asp:MenuItem>

                                <asp:MenuItem
                                    NavigateUrl="RegisterFree.aspx" Text="Free Trial" Value="mnuFreeTrial">
                                </asp:MenuItem>
                   
                                <asp:MenuItem
                                    NavigateUrl="ReplacePassword.aspx" Text="Replace Password" Value="mnuReplacePassword">
                                </asp:MenuItem>

                                <asp:MenuItem
                                    NavigateUrl="ChangePassword.aspx" Text="Change Password" Value="mnuChangePassword">
                                </asp:MenuItem>
                            </asp:MenuItem>
               
                            <asp:MenuItem NavigateUrl="#" Text="Site Usage Help" Value="mnuSiteHelp">
                                <asp:MenuItem
                                    NavigateUrl="ChangePasswordInstructions.aspx" Text="Password Change Help" Value="mnuChangePasswordHelp">
                                </asp:MenuItem>
                            </asp:MenuItem>

                    <asp:MenuItem NavigateUrl="#" Text="Admin Only" Value="mnuAdminOnly">
                        <asp:MenuItem
                        NavigateUrl="Admin/AdminMenu.aspx" Text="Admin Menu" Value="mnuAdminMenu">
                        </asp:MenuItem>
              </asp:MenuItem>
             
             </Items>
         </asp:Menu>
        </div>

I cannot find any difference in the code.

Thanks,
MainMenu.jpg
MainMenuCorrect.jpg
DovbermanAsked:
Who is Participating?
 
DovbermanConnect With a Mentor Author Commented:
I changed the rendering mode to List.

RenderingMode="List"

Now I need to separate the static items and increase the menu width.
Fix-item-seperation.jpg
0
 
Paul MacDonaldDirector, Information SystemsCommented:
What if you comment out this line, or change the height:
"class="auto-style1" style="width: auto; height: 24px; "
0
 
DovbermanAuthor Commented:
This was the only change that worked.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.