|
Subject:
|
Menu control adding 1px padding underneath in IE
|
|
Posted By:
|
thenoseknows
|
Post Date:
|
8/24/2006 7:02:13 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:
<!-- Primary Navigation -->
<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:
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
|
|
Reply By:
|
thenoseknows
|
Reply Date:
|
8/31/2006 10:19:58 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
|
