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

How to connect android app to App engine -

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

php - display validation error message next to the textbox in codeigniter -