Question

I am having a small issue with my main menu padding that I’m hoping someone can help me with. In Firefox and IE, everything is rendering fine. However, in Chrome and Safari, the padding is slightly different.

Right now, I have the left/right padding set to 1.82em, which ends up with a little bit of unused space after “Contact Us” in Chrome/Safari. I have also tried setting it to 31px, which ends up rendering perfectly in Firefox/IE, but in Chrome/Safari it places the last menu item on a new line.

I’ve read that Firefox and Chrome render padding exactly the same, so I’m at a loss on this one. I can probably java my way out of this and use different CSS for different browsers, but I’d rather avoid that. Any ideas?

Answer 1

Increasing your #jsn-page width to 961px makes 31px padding on your links work in chrome.

Edit:
See Dennis’ response below. A fixed width for each item will be the most reliable.

.main-menu > li > a { 
    width:160px;
    text-align:center;
    padding: 12px 0px 20px 0px;
}