Menu icon Foundation
Button Group Spacing

I have created a button group for my menu bar (see below) and the output has these weird spacing issues. I already saw the bug at https://github.com/zurb/foundation/commit/d13e7e3b453b572317cf966e9659613d212519aa and implemented it to no change.

Screenshot #1: Chrome

Screenshot #2: Firefox

Any tips or tricks for this?

Thanks.

<div class="row show-for-large-up">
    <div class="large-12 columns large-centered">
        <ul class="button-group round text-center">
            <li><a href="http://canine.texobyte.com" class="small button">Home</a></li>
            <li><a href="http://canine.texobyte.com/about" class="small button">About Us</a></li>
            <li><a href="http://canine.texobyte.com/classesri" class="small button">Classes RI</a></li>
            <li><a href="http://canine.texobyte.com/classesct" class="small button">Classes CT</a></li>
            <li><a href="http://canine.texobyte.com/privatetraining" class="small button">Private Training</a></li>
            <li><a href="https://yourcourteouscanine.dogbizpro.com/Public/Registration/Index.aspx" class="small button">Registration</a></li>
        </ul>
    </div>
</div>
            

         

Menu

Menu2

Foundationzurbbutton-groupbutton groupbuttonspacing

I have created a button group for my menu bar (see below) and the output has these weird spacing issues. I already saw the bug at https://github.com/zurb/foundation/commit/d13e7e3b453b572317cf966e9659613d212519aa and implemented it to no change.

Screenshot #1: Chrome

Screenshot #2: Firefox

Any tips or tricks for this?

Thanks.

<div class="row show-for-large-up">
    <div class="large-12 columns large-centered">
        <ul class="button-group round text-center">
            <li><a href="http://canine.texobyte.com" class="small button">Home</a></li>
            <li><a href="http://canine.texobyte.com/about" class="small button">About Us</a></li>
            <li><a href="http://canine.texobyte.com/classesri" class="small button">Classes RI</a></li>
            <li><a href="http://canine.texobyte.com/classesct" class="small button">Classes CT</a></li>
            <li><a href="http://canine.texobyte.com/privatetraining" class="small button">Private Training</a></li>
            <li><a href="https://yourcourteouscanine.dogbizpro.com/Public/Registration/Index.aspx" class="small button">Registration</a></li>
        </ul>
    </div>
</div>
            

         

Menu

Menu2
Rafi Benkual over 4 years ago

The fix you referenced was an improvement for all browsers and should be done. It is sort of unrelated to the underlying issue. There is an issue with how Chrome calculates fractions of % widths. It's a rounding error that doesn't occur in other browsers because they probably always round down or up. We've tried increasing the precision of the % width of the <li> but that doesn't really work either.

Lance Gundersen over 4 years ago

Thx for the reply Rafi, So currently there is no knwn fix for my current issue?