Navigation alignment with Safari (Mac)

I am not able to figure out why the side borders on each of these navigation items is misaligned. It looks fine in Firefox and Chrome.
http://splitlightdesigns.com/oxbridge/

Many thanks,
Houston

htown, can you post a full rez screenshot showing how they are misaligned? And mention the version of Safari.

Sure thing. Where you not seeing it in Safari on your computer?

Many thanks,
Houston

No misalignment for me in the latest Safari. Not sure what you are referring to.

See this screen shot. Might help. This is what I am seeing.

I wouldn’t recommend setting a line height in px as a rule, but a quick fix here is to do something more logical than this:

.main-navigation li a, footer.entry-meta {
line-height: 0;
}

That’s kind of asking for trouble. Try this instead:

.main-navigation li a, footer.entry-meta {
line-height: 11px;
}

As I say, though, I don’t recommend a px line height at all.

I’m on a PC, so, No, I wasn’t. :slight_smile:

The second screenshot, the one that shows the correct and flawed views, was ideal. Unfortunately, I had not recognized the problem with the dividers in the first screen shot but instead had spotted a vertical pixel jog near the left and right ends of the fancy box and thought that’s what you were talking about. Your second screen shot left no “opportunity for misinterpretation”, shall we say :lol:

I might have been able to spot the problem, but was primarily collecting more information for Paul or Ralph (someone with a Mac).

Glad to see that Ralph’s suggestion worked for you :slight_smile:

Cheers!

So the CSS solution is not really for the navigation dividers but for this pixel jog, that I myself never saw. :slight_smile: So am I now waiting to see a solution from someone else to fix this DIVIDER problem with Safari?

Many thanks,
Houston

No. My apologies. I may have inadvertently just confused you (: My last post was the equivalent of an “aside”.
The message I was responding to was posted before Ralph pitched in. I was just explaining why I had asked for more clarification about the trouble and musing that based on the first screen shot and perhaps my not-so-clear reading of your trouble description, I would have been off base :lol:

By all means, try Ralph’s CSS solution for the problem with the divider position and let us know if it works. (Remember, I’m on a PC and cannot see it.)
Personally, I would choose a different method to apply the dividers and I would also make them taller, too, so they look more like separators than like part of the text. Different tastes. :slight_smile: If Ralph’s CSS solution is not satisfactory, I’ll share mine with you and you can test it with Safari.

I’m not aware that anyone is addressing that pixel jog since you did not introduce it as a problem. In Firefox, I see it as a scroll bug that shifts at the top and bottom of a page. I didn’t know it occurred in browsers other than FF so I have never searched for the cause or a solution.

Yes, that’s what my code was for. You didn’t even try it? :frowning:

I did not try it because I thought it was for the pixel jog. I have been pulled several different directions with this client so I apologize for not keeping a closer tab on this thread.

So I tried Ralph’s css and it worked beautifully. Thank you Ralph. Much much much appreciated.

Thanks to the both of you for sticking with me. :slight_smile:

Many thanks,
Houston

Glad that helped, Houston. :slight_smile: