Come posso risolvere il mio menu HTML (semplice comportamento anomalo di menu nei browser WebKit)

Question

sto ponendo questa domanda qui perché sto diventando un po 'disperato per risolvere questo problema che mi ha veramente sconcertato ora come non riesco a vedere una ragione per questo.

Si può vedere la navigazione in alto che dice "di casa, golf ... etc giocare" nella parte superiore di questa pagina: http://urbangolf.mammalworld.com/golf-club-fitting/half- giorno

Sembra funzionare correttamente (allinea su una riga) in Firefox e IE, ma su Chrome e Safari si avvolge ad una seconda linea a circa 710px, e non riesco a trovare una ragione. Sembra essere dovuto alla sostituzione font utilizzando Cufon, ma questo deve occure, ma se gli altri due browser (IE soprattutto !!) possono rendere in modo corretto, come posso ottenere quelle WebKit per comportarsi?

Il vostro aiuto sarà molto apprezzato.

Corretto [IE / FF]

alt text http://urbangolf.mammalworld.com/templates/navigation-correct .jpg

sbagliato [Chrome / Safari]

alt text http://urbangolf.mammalworld.com/templates/navigation-wrong .jpg

Answer 1

Non sono del tutto sicuro perché WebKit di decidere di farlo, ma per fortuna c'è una soluzione semplice per queste situazioni che utilizzano modelli <ul> orizzontali.

In user.css Cambio:

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

Aggiungi white-space: nowrap;:

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