Foundation 4 Top Bar Issue

[boblmartens]

I'm working with Foundation 4 in a Rails app and perfectly understand that using Foundation Icons 2 hasn't been tested yet, so here I go!

When adding an icon to a Top Bar, an extra 2px is computed for the unordered list being used for some right links. That's in Safari 6.0.2. In Firefox 19 only a single pixel is added to the bottom.

It goes away in a number of cases:

• add an explicit height to the list item
• remove the icon

If you add an explicit height (in this case, 45px) to the unordered list that the list item in contained in, then you'll have that single list item as the only one with the extra pixels on the bottom.

Once again, you take the icon out of the picture and things go back to normal.

Any help would be greatly appreciated. I'm not sure what, in conjunction with the icon, is making the computed 47px height in Safari on OS X 10.8

[boblmartens]

More information.

Adding an explicit height of 45px to the anchor tag fixes the issue.

[auginator]

I had the same issue last night! I was using Foundicons in mine.

[boblmartens]

Excellent, then I don't feel quite as stupid as I was before.

[fellipeh]

I have this same error, how can I fix this? where I adding explicit height 45px?

[becorey]

I had the same error. Fixed with
.top-bar a { height: 45px !important; }