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.