CSS navigation looks different on Firefox and other browsers

Hi,

I am working on the following website:

questboss.com

Code (markup):

The navigation bar below the logo looks different on Firefox and other browsers (Chrome, IE, Safari, Opera). I like the way it looks on Firefox and I want it to look the same on other browsers as well but I couldn't make it. The navigation buttons have the correct padding in Firefox, but not in Chrome or other browsers, including IE.

Do you have any ideas?

Thanks.

 

For me, it looks the same in Firefox and Chrome?

 

UPDATE: Solved.

Changed the CSS slightly and now it looks a lot better.

 

Firefox uses a different text rendering engine than webkit based browsers, there's nothing you can do about this. What I do is detect if their browser is Mozilla then apply different padding for them.

 

This really points out the need to view your pages on all the browsers. They just don't all follow the standards. We were having real problems with our navigation panel in Safari, and since we weren't checking it
on Safari we were losing a lot of apple users. Fixed our problems by changing relative to fixed positions, but
we shouldn't have had to.

wiz