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

timeout - Handshake_timeout on RabbitMQ using python and pika from remote vm -

gcc - MinGW's ld cannot perform PE operations on non PE output file -

c# - Search and Add Comment with OpenXML for Word -