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
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
Post a Comment