Question

I have a strange problem on a navigation menu that only appears in Firefox (works fine in IE7, 8, 9, 10 & Chrome). The links on the menu are displayed as blocks however they are calculated larger in Firefox (more width) than any other browser and so they don’t align properly. The odd thing is that once the links have been clicked even if it’s a right click then Firefox puts them to how they should be.

The CSS has been reset and this problem on happens in Firefox so I’m thinking it is a Firefox bug?

<nav>
    <ul id="primary-nav">

        <li><a id="nav-home" href="/wordpress">HOME</a></li>
        <li><a id="nav-work" href="/wordpress/work">WORK</a></li>
        <li><a id="nav-about" href="/wordpress/about">ABOUT</a></li>
        <li><a id="nav-contact" href="/wordpress/contact">CONTACT</a></li>
        <li><a id="nav-blog" href="">BLOG</a></li>

    </ul>
</nav>


ul#primary-nav li {
    float: left;
    list-style-type: none;
    background: none;
    padding: 0;
    margin-left: 25px;
}

ul#primary-nav li a {
    font-size: 1.5em;
    display: block;
    padding-top: 40px;
}

ul#primary-nav li a#nav-home {
    background: url('./images/nav-home-button.png') top center no-repeat;
}

ul#primary-nav li a#nav-work {
    background: url('./images/nav-work-button.png') top center no-repeat;
}

ul#primary-nav li a#nav-about {
    background: url('./images/nav-about-button.png') top center no-repeat;
}

ul#primary-nav li a#nav-contact {
    background: url('./images/nav-contact-button.png') top center no-repeat;
}

ul#primary-nav li a#nav-blog {
    background: url('./images/nav-blog-button.png') top center no-repeat;
}

ul#primary-nav li a:first-letter {
    font-size: 1.3em;
}

Answer 1

conclusion: there is a bug in firefox that miscalculates the width of an element if its :first-letter has a font-size set.

This bug has been filled in 2007: https://bugzilla.mozilla.org/show_bug.cgi?id=385615 . As of January 2013, it is still open. Linking to this answer from there.

In fact, there is already a Stack Overflow question from September 2011 asking for a work-around.

The accepted work-around is to trigger a reflow by performing an animation (credit: kizu)

@-moz-keyframes bugfix { from { padding-right: 1px ; } to { padding-right: 0; } }

.test {-moz-animation: bugfix 0.001s;}

---

---

Here is the minimal test case that demonstrates the issue (http://jsfiddle.net/6eYu6/1/):

<div><a href="#">HOME</a></div>
<div><a href="#">WORK</a></div>

div{float: left;}
a{display: block;}
a:first-letter {font-size: 1.3em;}​

In Chrome, there’s no gap (expected behavior). In Firefox, there is a gap due to the a element being wider.

---

My research:

On clicking the first link, or tabbing to it, the gap disappears. The gap does not reappear when the link loses focus. The link reappears on page reload.

If the href attribute is removed (http://jsfiddle.net/6eYu6/2/), the gap persists. Clicking no longer has any effect.

Adding a click handler or preventing the click action (return false in jQuery) has no effect in either direction. The same applies to the focus event (it is triggered with href present). Preventing the focus event removes the effect of tabbing onto the link.

---

Removing the float attribute and turning all elements inline causes predictable behavior (a whitespace-sized gap, no effect on clicking). However, the effect of :first-letter disappears as well.

When the font-size is removed, or given to the whole link, or given to a span, the gap disappears.

The width of the link (in firefox, before the click-fix) is the same as if the entire text had that font size.

When a hover effect that involves resizing the element is added to the link, the gap disappears on first hover.

When the float is removed, the link width is 100% (naturally).