Horizontal Menu Issues - html

Question

I am having trouble getting a horizontal menu to line up correctly in IE9 and Firefox.
This is what it displays like in IE and Firefox:
And this is what it displays like in Chrome, Safari and Opera:
I keep getting that damn overflow!
What might be the issue?
My CS:
.service-list {
position:absolute;
top:0;
left:0;
display:block;
width:960px;
}
#services-content .service-list li {
float:left;
display:inline;
}
#services-content .service-list li a {
display:block;
float:left;
color:#F37FA8;
text-decoration:none;
padding:0 20px;
background-color:pink;
font-weight:400;
}
#services-content .service-list li a:hover {
text-decoration:underline;
}
#services-content .service-list li.last a {
padding-left:20px;
padding-right:0;
}
#services-content .service-list li.first a {
padding-left:0 !important;
}
The menu is spat out by wordpress.
Thanks,
Nick

Answer 1

Looking at the css on the site you posted. The inconsistency may be caused by your use of font-size:120% on the a tags (line 186 of style.css).
When you pop open firebug in firefox or developer tools in chrome, notice in the 'computed style' section that chrome is rendering 120% as 17px while firefox is rendering it as 16.8px.
How the browsers render this differently is a little out of scope, but you may want to try using pixels or ems instead. Hope this helps.

Answer 2

The issue is that there is a 40 pixel space between each item, and every item is being floated left, and this is making everything wrap when there's not enough room in each line.
You could try changing padding: 0 20px; in #services-content .service-list li a to something smaller, say padding: 0 10px;