Last menu item drops down several pixals after certain width RRS feed

  • Question

  • User-985212943 posted

    I'm trying to do a simple one tier horizonal menu using the cssfriendly control adapters.  My problem is that if I set the width for li above a certain amount (in this case 12em)  then my last item has a vertical indentation above it in firefox - it doesn't line up horizontally.  Doesn't drop down to the next line, it just drops down about 10px.  I thought that this could be due to the width value of ul.Aspnet-Menu but the problem occurs however large this value is.  Any ideas as to what is happening?

    .CCMenu ul.AspNet-Menu /* Tier 1 */
        width: 52em; /* This is more than (6em x 2) because we want to leave room for borders around the <li> elements that are selected */

    .CCMenu li /* all list items */
        width: 13em;
        font-size: .8em;

    <div >
    <asp:Menu ID="MainMenu" runat="server" Orientation="Horizontal"  OnMenuItemClick="MainMenu_MenuItemClick"
        CssSelectorClass="CCMenu" >
            <asp:MenuItem NavigateUrl="~/default.aspx" Text="Home" Value="~/default.aspx" />
            <asp:MenuItem NavigateUrl="~/recommendations.aspx" Text="Client Testimonials " Value="~/recommendations.aspx" />
            <asp:MenuItem NavigateUrl="" Text="Driver Application" Value="" />
            <asp:MenuItem NavigateUrl="" Text="Request Quote" Value="" />

    Tuesday, July 17, 2007 3:47 PM


  • User-985212943 posted
    I found my error.  There was a div with a fixed height and floating right above the menu control.  When I made the menu wide enough that the last item hit up against the div above, it forced the last item down below the div.  Not what I expected to happen but obvious when I used firefox Web Developer addon to display inline blocks.
    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, July 17, 2007 4:34 PM