CSS navigation looks different on Firefox and other browsers
I am working on the following website:
The navigation bar below the logo looks different on Firefox and other browser. 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. Do you have any ideas?
I'm looking at Firefox and IE8. They look almost exactly the same. Could you be more specific about which browsers do not look right? and describe the differences that you see?
Please check it in Chrome, Safari or Opera and you will see the difference. The navigation buttons have the correct padding in Firefox, but not in Chrome or other browsers, including IE. In IE, top and bottom padding for the inner box are not displayed. I could have used images for buttons but I don't want to use images every time I can't fix some CSS3 stuff. I am using a list (ul) for the navbar, perhaps I should use divs?
I have looked at your site in Firefox 15.0.1, Chrome 13.0.782.112, Safari 5.0.3, Opera 12.02, Internet Explorer 8.0.6001.1872 and even Kindle Fire (via the Opera Mobile Emulator) on Windows XP.
All of these browsers show exactly the same layout with only a very minor difference in thickness to the borders in Opera. I don't think there is anything you can do about the way different graphics engines render borders.