Padding uneven on navigation links

Hello,

I was wondering if someone could take a look at this site and help me figure out why the top/bottom padding on the navigation links is uneven.

http://goo.gl/qwm98x

I’ve run into this issue before, but can’t remember how to fix it. When I look at it in Chrome and Safari, there’s too much padding on the top of the links. When I look in IE and Firefox, there’s too much padding on the bottom of the links.

Any ideas? Thanks!

Not sure I can see a problem – in Opera, Chrome and Firefox the navigation looks to be nicely centred vertically within the bar – can you give us screenshots to show exactly what the issue is?

Likewise, it looks the same in Firefox and Chrome to me—and looks fine, too. :-/

Thanks to both of you for looking. I think I’ve narrowed the problem down to Windows 7. When I view it on another OS, everything is fine.

Here are the screenshots:

FIREFOX:

IE:

CHROME:

SAFARI:

I prefer not to use top and bottom padding on links like that, but instead to use line-height. That way, the link text is always nicely centered.

I tried doing it that way just now, but it didn’t work so well since that search box is on the right side of the navigation bar.

All browsers vary a little in how they align text vertically as some assume descenders and some take into account anti aliasing and some like IE have sub pixel positioning algorithms not to mention browsers font variations. Combine that with your use of rems which are rounded measurements and unitless line-height you have another couple of variations added into the mix where dimensions need to be calculated and rounded into exact pixels.

Therefore it is not surprising that you will find browers to be 1 or 2 pixels out at times.:slight_smile:

Where it is important to you then I would use a pixel line-height instead.

e.g.


.genesis-nav-menu a {
    border: medium none;
    color: #FFFFFF;
    display: block;
  [B]  line-height: 22px;
[/B]    padding: 1rem 2.4rem 1.2rem;
    position: relative;
}

I would also use pixel padding for top and bottom (in this case) to avoid line-height rounding and get browsers into line. I’m not a fan of ems (or rems) for padding anyway as I don’t like the way that it stretches and you end up with either big gaps or small gaps depending on the resolution and although it may be consistent with the layout I find it just doesn’t seem to work so well (but that’s just me :)).

Okay, thanks so much. :slight_smile: