Menu control adding 1px padding underneath in IE

thenoseknows · August 24th, 2006, 07:02 PM

I am using the asp.net 2.0 Menu web control to present a dynamic menu in a website. The menu has no data source and is not bound to anything. I am using strictly as a hard coded dynamic menu for navigation only. In Firefox, it looks fine, but in IE, the menu is putting in some additional vertical height in somewhere. I normally wouldn't care so much about 1px but in this case this menu is for a public website for which we paid a lot of money for a professional graphic design company to make a whole corporate logo and design for us, so we really want to stick to it and make it look great.

Here is the code for the menu control as I have it configured now:

Code:

                <div class="columnContainer">

                    <div class="wideColumn" id="primaryNavBar">
                        <div><asp:Menu ID="mnPrimaryNav" runat="server" 
                                MaximumDynamicDisplayLevels="1" 
                                DynamicHoverStyle-BackColor="#665C53" 
                                Orientation="Horizontal" 
                                StaticMenuItemStyle-CssClass="primaryNavBtns" 
                                StaticMenuItemStyle-BorderWidth="0px" 
                                StaticMenuItemStyle-VerticalPadding="0"
                                DynamicMenuStyle-Font-Bold="true" 
                                DynamicMenuItemStyle-BorderWidth="1px" 
                                DynamicMenuItemStyle-BackColor="#73614B" 
                                DynamicMenuItemStyle-BorderStyle="Solid" 
                                DynamicMenuItemStyle-BorderColor="#8E7F67" 
                                DynamicHorizontalOffset="0" 
                                DynamicMenuItemStyle-Font-Size="12px" 
                                DynamicMenuItemStyle-ForeColor="#FFFFFF" 
                                DynamicVerticalOffset="0" 
                                DynamicEnableDefaultPopOutImage="false" 
                                DisappearAfter="300" 
                                ToolTip="Menu"  
                                DynamicMenuItemStyle-VerticalPadding="3" 
                                DynamicMenuItemStyle-HorizontalPadding="3" 
                                StaticSubMenuIndent="0"
                                StaticPopOutImageUrl="~/images/brown1px.png" 
                                EnableViewState="false" 
                                EnableTheming="false" 
                                StaticMenuStyle-HorizontalPadding="0" 
                                StaticMenuStyle-VerticalPadding="0">

                                <Items>
                                    <asp:MenuItem NavigateUrl="~/AboutUs.aspx" Text="About Us" />
                                    <asp:MenuItem Selectable="false" Text="Careers">
                                        <asp:MenuItem NavigateUrl="~/Careers/ExperiencedHires/Default.aspx" Text="Experienced Hires"></asp:MenuItem>
                                        <asp:MenuItem NavigateUrl="~/Careers/CollegeRecruiting/Default.aspx" Text="College Recruiting"></asp:MenuItem>
                                    </asp:MenuItem>
                                    <asp:MenuItem NavigateUrl="~/ContactUs.aspx" Text="Contact" />
                                    <asp:MenuItem NavigateUrl="~/Events.aspx" Text="Events" />
                                    <asp:MenuItem Selectable="false" Text="Services">
                                        <asp:MenuItem NavigateUrl="~/Services/Accounting/Default.aspx" Text="Accounting Services"></asp:MenuItem>
                                        <asp:MenuItem NavigateUrl="~/Services/Forensics/Default.aspx" Text="Forensics"></asp:MenuItem>
                                        <asp:MenuItem NavigateUrl="~/Services/InternalAudit/Default.aspx" Text="Internal Audit"></asp:MenuItem>
                                        <asp:MenuItem NavigateUrl="~/Services/ITAssurance/Default.aspx" Text="IT Assurance"></asp:MenuItem>
                                        <asp:MenuItem NavigateUrl="~/Services/Research/Default.aspx" Text="Research"></asp:MenuItem>
                                        <asp:MenuItem NavigateUrl="~/Services/TaxConsulting/Default.aspx" Text="Tax Consulting"></asp:MenuItem>
                                    </asp:MenuItem>
                                </Items>
                            </asp:Menu>
                        </div>
                    </div>

Here are the three relevant styles:

Code:

div.primaryNav {
    height: 28px;
    border-bottom: 1px solid #8E7F67;
    margin-bottom: 0px;
    padding-bottom: 0px;
}

div.columnContainer {
    width: 760px;
    display: table-row; 
}

div.wideColumn {
    width: 558px;
    float: left;
}

.primaryNavBtns {
    border-left: 1px solid #827461;
    height: 28px;
}

I want the menu to be exactly 28px in height, no more, no less. Any help or advice anyone could offer would be greatly appreciated!

Neil

Neil Timmerman
Programmer
Veris Consulting

thenoseknows · August 31st, 2006, 10:19 AM

By the way, in case anyone reads this for the future, I didnt find the real solution but I hacked my way around it with some CSS:

On the Menu, I set the StaticMenuItemStyle-CssClass="primaryNavBtns".

Here is that class:

.primaryNavBtns {
    border-left: 1px solid #827461;
    height: 28px;
    margin-bottom: -1px;
    padding: 0px 2px 0px 2px;
}

Neil Timmerman
Programmer
Veris Consulting