This is the final problem I have with my site. It now works exactly how I want it in every browser, except Firefox 3.0.##. (Also haven’t tested IE6).
It looks fine in every browser, but in FF 3.0 it looks like padding: 4px 0 4px 0; is added to the menu. I was playing around with the paddings and found out that is not where the problem lies, because it’s not padding that is added. I also tried changing the line-height (to 1.2em), that almost worked but it isn’t the solution, there is still a 1px difference between 3.0 & 3.5 that becomes very apparent because of the menu item hover effect.
It’s coded like this:
CSS
Code:
#navbar {
height: 40px;
padding-top: 115px;
padding-bottom: 0;
width: 100%; }
ul#navlinks {
float: right;
width: auto;
text-align: right;
padding: 4px 0;
background: url(images/contentbg.png) repeat;
border: 1px solid #333333;}
ul#navlinks li { display: inline; }
ul#navlinks li a {
text-decoration: none;
text-transform: uppercase;
font-size: 1.5em;
font-weight: bold;
padding: 4px 10px;}
ul#navlinks li a:hover {
background: url(images/contentbg.png) repeat;
color: white;}
HTML
Edit
After some long hours of experimenting I got it to work with a different font. Yay for workarounds.