Crouching Title Bar, Hidden Drop Menu

I’ve finally tracked down an obscure IE9 bug that has been haunting me for a while — drop menus that go missing. I’ve been able to treat the symptoms and even able to pinpoint part of the cause and work around it, but I’ve never fully understood all the moving parts of this bug and finally put it to rest.

The bug

Say you have a title bar with a CSS3 gradient, a horizontal navigation system with a drop menu in that title bar… Here’s the HTML (in a nutshell):

<!-- HTML -->
<div class="titlebar">
    <nav class="topnav">
        <ul>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
            <li>
                <a href=""></a>
                <ul>
                    <li><a href=""></a></li>
                </ul>
            </li>
        </ul>
    </nav>
</div>

And here’s the CSS (in a nutshell):

/* CSS */
div.titlebar {
    background-color: #dedede;
    background: -webkit-linear-gradient(top, #f2f2f2, #c0c0c0);
    background: -moz-linear-gradient(top, #f2f2f2, #c0c0c0);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#f2f2f2, #c0c0c0)";
    background: -ms-linear-gradient(top, #f2f2f2, #c0c0c0);
    background: -o-linear-gradient(top, #f2f2f2, #c0c0c0);
}
nav.topnav {
    display: inline-block;
    float:  right;  
}
nav.topnav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
nav.topnav ul li {
    display: inline-block;
    position: relative;
}
nav.topnav ul li a {
    border: 1px solid;
    display: inline-block;
    text-decoration: none;
    line-height: 1.6em;
    padding: 0 0.8em;
    white-space: nowrap;
}
nav.topnav ul ul {
    display: none;
    left: 0;
    position: absolute;
    z-index: 45;
}
nav.topnav ul ul li {
    display: block;
    margin: 0;
    padding: 0;
}
nav.topnav ul ul li a {
    display: block;
}

Now this part actually works for now… until you try to position the title bar for whatever reason. Say you want to make the title bar fixed at the top of the page:

div.titlebar {
    position: fixed;
}

Poof! The drop menu no longer works in IE9. So one would generally think that positioning is the issue and to avoid it at all costs. Unfortunately there are a lot of cases where one might want to position a title bar, whether it’s to apply a z-index, lock it to the top of an otherwise scrolling page, etc… so avoiding positioning kind of sucks. I can think of 3 of our themes that are not exactly how I had envisioned them, precisely because I’ve had to steer clear of this IE9 bug.

Yesterday I decided to fire up a code editor and Google and spend some hardcore time getting to the bottom of it. While none of the results showed me the smoking gun, there was a lot of reading to be done on various IE9 bugs. Through some extensive testing I was able to conclude that it is IE9, the -ms-filter property and positioning — all applied to the title bar — that combine to make the perfect storm of drop navigation failure.

The fix

To avoid the bug you simply have wrap the title bar in an element:

<!-- HTML -->
    <div class="titlebarOuter">
        <div class="titlebar">
            <nav class="topnav">
                <ul>
                    <li><a href=""></a></li>
                    <li><a href=""></a></li>
                    <li>
                        <a href=""></a>
                        <ul>
                            <li><a href=""></a></li>
                        </ul>
                    </li>
                </ul>
            </nav>
        </div>
    </div>

And apply your positioning to that wrapper element and not the title bar:

div.titlebarOuter {
    position: fixed;
}

Hope this helps.

One Response to “Crouching Title Bar, Hidden Drop Menu”

RapidWeaver® is a registered trademark of Realmac Software.