Question

I’m placing this question here because i’m becoming a little desperate to fix this problem that has really puzzled me now as i can’t see a reason for it.

You can see the top navigation that reads “Home, play golf…etc” at the top of this page:
http://urbangolf.mammalworld.com/golf-club-fitting/half-day

It seems to work correctly (lines up on one line) in Firefox and IE, but on Chrome and Safari it wraps to a second line at about 710px, and i can’t find a reason. It seems to be due to the font replacement using Cufon, but this must occure, but if the other two browsers (especially IE!!) can render it correctly, how can i get the webkit ones to behave?

Your help will be greatly appreciated.

Correct [IE/FF]

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

Wrong [Chrome/Safari]

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

Answer 1

I’m not entirely sure why webkit’s deciding to do that, but luckily there’s an easy fix for these situations using horizontal <ul> patterns.

In user.css Change:

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

Add white-space: nowrap;:

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