user7224892 user7224892 - 9 months ago 51
CSS Question

HTML - Menu item one pixel off at 90% and 110% zoom

I update the website's content (not via a CMS) for the company I work for. I'm by no means an expert, but can get by with what we need. is the site.

I've recently seen an error in the positioning the first top bar menu item (HOME / WHO WE ARE) and can't work out why it's happening.

The menu items' positioning is one pixel above where it should be when you zoom at 90% and 110% in Chrome, Firefox and IE. All other zoom amounts don't show this error in positioning.

Could anyone please inform me of why it's doing this, and potentially, a way to fix it?

Thank you very much in advance.

Answer Source

Remove height and padding-top for menu items and use below styles

a.navitem, a.navitem:link, a.navitem:visited, a.navitem:active
    height: 35px;
    line-height: 35px;
a.navitem.double, a.navitem.double:link, a.navitem.double:visited, a.navitem.double:active
    line-height: 16px;