Firefox 3.5.3 horizontal menu drop-off

Question

URL: www.htiops.com
CSS: www.htiops.com/css/htiOps.css

The last two links in the gray horizontal nav bar are vertically dropping down in FF 3.5.3. It doesn't happen in older versions of FF, IE7, O8, Saf3.

Changing the font in #navBar ul li a from .8em to 10px fixes the drop-off problem, but is not the desired appearance of the menu.

Any thoughts?

Answer 1

The problem is that all the elements are too wide for the container and they are wrapping. I had the exact same thing in Wordpress recently. I shortened the text and it worked fine.

One thing that works - as a hack - is:

#navBar ul {
    margin: 0px;
    padding: 0px;
    color: #fff;
    float: left;
    font-weight: bold;
    display:block;
    width: 120%;          <-- from 100%
}

Perhaps you can play with the widths and get it all to fit, or shorten some words. (I know, it's a hack and I don't like them, but it's fast and looked ok to me :)