user7224892 user7224892 - 4 days ago 6
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. http://www.surreyilc.org.uk 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

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;
}
Comments