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

powershell Start-Process exit code -1073741502 when used with Credential from a windows service environment -

twig - Using Twigbridge in a Laravel 5.1 Package -

c# - LINQ join Entities from HashSet's, Join vs Dictionary vs HashSet performance -