html - Navigation displaying slightly different in Firefox -


on site i'm working on, i've got looking pretty same on main browsers (checking chrome, safari & firefox).

all except pesky 1px gap on navigation items, noticeable on active items (when background filled).

you can visit site here: http://lumbre.breadadams.com/

this gap i'm talking about

1px menu item space

i've messed height, line-height, padding, etc. of multiple elements (nav, ul , such), nothing seems trick.

however if increase font-size 1.2em 1.3em fits, doesn't on chrome. increasing font 0.1 @ time makes alternate between fitting on chrome , firefox basically.

#navigation-container #main-nav ul > li.menu-item-has-children > a::after {     content: "";     font-family: fontawesome;     margin-left: 4px;     position: absolute; } 

here answer amigo!

just add position: absolute;

it's :after (the small icon) needs position absolute. it's causing bit of upper space, when give position absolute, friend!


Comments

Popular posts from this blog

twig - Using Twigbridge in a Laravel 5.1 Package -

jdbc - Not able to establish database connection in eclipse -

firemonkey - How do I make a beep sound in Android using Delphi and the API? -