¿Cómo soluciono mi menú HTML (el menú simple se comporta mal en los navegadores WebKit)?

Question

Estoy colocando esta pregunta aquí porque me estoy desesperando un poco por solucionar este problema que realmente me ha desconcertado porque no veo la razón.

Puede ver la navegación superior que dice "Inicio, jugar golf...etc" en la parte superior de esta página:http://urbangolf.mammalworld.com/golf-club-fitting/half-day

Parece funcionar correctamente (se alinea en una línea) en Firefox e IE, pero en Chrome y Safari se ajusta a una segunda línea a aproximadamente 710 px, y no puedo encontrar una razón.Parece deberse al reemplazo de fuentes usando Cufon, pero esto debe ocurrir, pero si los otros dos navegadores (¡especialmente IE!) pueden renderizarlo correctamente, ¿cómo puedo hacer que los de webkit se comporten?

Su ayuda será muy apreciada.

Correcto [IE/FF]

texto alternativo http://urbangolf.mammalworld.com/templates/navigation-correct.jpg

Equivocado [Cromo/Safari]

texto alternativo http://urbangolf.mammalworld.com/templates/navigation-wrong.jpg

Answer 1

No estoy del todo seguro de por qué WebKit de decidirse a hacer eso, pero afortunadamente hay una solución fácil para estas situaciones utilizando patrones <ul> horizontales.

En user.css Cambio:

.top-navigation ul {margin:0;padding:0;padding-top:10px;padding-bottom:10px;width: 960px;}

Añadir white-space: nowrap;:

.top-navigation ul {margin:0;padding:0;padding-top:10px;padding-bottom:10px;width:960px;white-space:nowrap;}