Why doesn't this button expand to width of its content in Firefox like it does in other browsers?

Question

This question seems crazy long, but I wanted to clearly explain everything.

Desired Result

I have a horizontal menubar with submenus. I created it from scratch, so I am not using any existing framework. It uses a combination of buttons, anchors, and spans for semantic markup.

• anchors for items that go to a new page
• buttons for items that don't go anywhere but have submenus
• spans for disabled items

Note: This site is for a limited number of specific users so I am not concerned about the lack of accessibility.

Submenus should be as wide as the widest menu item that it contains. And each menu item should fill the width of the submenu so that the cursor and focus outlines display as desired.

The Problem

In Firefox, a submenu does not expand to the width of the widest item in the following scenario:

• submenu is absolutely positioned
• submenu is contained within a block that has position other than static
• longest menuitem is a button

I've tested with Chrome, IE 8, Firefox 12, and Firefox 20. It displays as desired in Chrome and IE, but not in either version of Firefox.

I created a scaled down version with JavaScript, images, disabled items, and many of the menu items removed. Code is below and also on jsFiddle. Here's a screenshot in Firefox 20.

Note how the Section Titles item is squished. The submenu is only as wide as the Page Titles item (with padding). Also note how this is not a problem in the top level submenu - that menu expanded to the width of Customize PDF Titles.

The Section Titles item is a button. If I change it to an anchor, the submenu expands as desired. If I change the button CSS to remove width: 100%, then the submenu expands as desired. But then, menu items that are narrower than the submenu no longer fill the width (even if I add display: block).

Here's a screenshot of how the above fix breaks other parts of the menu.

Note how the cursor is not a pointer when hovering outside the text. Yes, I could fix that by changing the cursor for the li, but the other problem is the focus outline. I want the focus outline to be around the whole menu item not just the text (which is how it works with width: 100%).

I also tried playing around with -moz-box-sizing, but still no joy.

As a simple workaround, for this particular case, I've just added a few   to Page Titles to make it longer. But that solution won't work when the menu is created dynamically.

HTML Code (jsFiddle)

<ul id="navAdminMenu">
    <li><a href="#">Companies</a></li
    ><li class="hasSubmenu"><button type="button">Books</button>
        <ul>
            <li><a href="#">Manage Books</a></li
            ><li><a href="#">PDF Profiles</a></li
            ><li class="hasSubmenu"><button type="button">Customize PDF Titles</button>
                <ul>
                    <li><a href="#">Page Titles</a></li
                    ><li class="hasSubmenu"><button type="button">Section Titles</button>
                        <ul>
                            <li><a href="#">Profile Section</a></li
                            ><li><a href="#">Index Section</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </li
    ><li class="hasSubmenu"><button type="button">Lists</button>
        <ul>
            <li class="hasSubmenu"><button type="button">Categories</button>
                <ul>
                    <li><a href="#">Manage</a></li
                    ><li><a href="#">Reports</a></li>
                </ul>
            </li
            ><li><a href="#">Key Contact Positions</a></li>
        </ul>
    </li>
</ul>

CSS Code

#navAdminMenu {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1em;
    list-style: none;
    margin: 0;
    padding: 0;
    background-color: #efefef;
}
#navAdminMenu button {
    margin: 0;
    padding: 0;
    vertical-align: baseline;
    border: none;
    background-color: transparent;
    cursor: pointer;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1em;
}
#navAdminMenu button::-moz-focus-inner {
    padding: 0;
    border: none;
}
#navAdminMenu a {
    text-decoration: none;
}
#navAdminMenu li {
    display: inline-block;
    margin: 0;
    border-right: 1px solid #ccc;
}
#navAdminMenu li:hover {
    background-color: #4b545f;
}
#navAdminMenu > li > button, #navAdminMenu > li > a {
    display: inline-block;
    height: 2.3em;
    line-height: 2.6;
    padding: 0 10px;
}
#navAdminMenu > li > button, #navAdminMenu > li > a {
    color: #06c;
}
#navAdminMenu > li > button:focus, #navAdminMenu > li > a:focus {
    outline: 0; /* Firefox displays outline outside the menu box-shadow */
    box-shadow: 0 0 0 3px #06c;
}
#navAdminMenu > li:hover > button, #navAdminMenu > li:hover > a {
    color: #fff;
}
#navAdminMenu > li.hasSubmenu > button:after {
    content: "v";
    display: inline-block;
    width: 13px;
    margin-left: 5px;
}
#navAdminMenu ul {
    display: none;
    position: absolute;
    padding: 0;
    background-color: #5f6975;
}
#navAdminMenu li:hover > ul {
    display: block;
}
#navAdminMenu ul > li {
    display: block;
    position: relative;
    border-top: 1px solid #999;
    border-bottom: 1px solid #000;
}
#navAdminMenu ul > li > button, #navAdminMenu ul > li > a {
    height: 2em;
    line-height: 2;
    padding: 0 30px 0 10px;
    white-space: nowrap;
}
#navAdminMenu ul > li > button {
    width: 100%; /* full width of submenu */
    text-align: left;
}
#navAdminMenu ul > li > a {
    display: block; /* full width of submenu */
}
#navAdminMenu ul > li > button, #navAdminMenu ul > li > a {
    color: #fff;
}
#navAdminMenu ul > li > button:focus, #navAdminMenu ul > li > a:focus {
    outline: #fdcb01 solid 3px;
}
#navAdminMenu ul > li.hasSubmenu > button:after {
    content: ">";
    width: 16px;
    position: absolute;
    right: 0;
}
#navAdminMenu ul ul {
    left: 100%;
    top: 0;
}

Question

Is there something simple I am missing? Or should I report this as a bug to Mozilla?

Note: I don't want to change the buttons to anchors.

Answer 1

I spent way too much time on this tiny glitch, but I am like a dog with a bone.

After all the trial and error and the time spent drafting the question, I found a very simple solution. I thought of just discarding my question, but maybe it can help someone else.

Very, very simple solution. So simple I could almost cry.

#navAdminMenu ul > li > button {
    /* full width of submenu (even when its the longest item) */
    min-width: 100%;
}

Note the use of min-width.