CSS Text-fit problem with navigational buttons [Fire Rescue Template]

Hi there,

I've been building a site based on the Fire Rescue template, in which I've customised the navigational buttons along the top - adding in additional ones at the top.

Now my question is, although everything is looking perfect on my machine - having used browsershots.org to see how the page looks to others on various browsers, the text overshoots the width of the page and causes the buttons to continue underneath on a seperate row.

Examples:



or with word-wrap:


I have tried using word-wrap so that the buttons to not continue into a second row, but this doesn't seem to have worked - mainly because the word-wrap function doesn't work with all browsers (I believe).

The font being used is Eurostile and it seems that those that don't have the font on their machine is a large part of the problem, as its the replacement font which isn't fitting within the margins. I have therefore tried setting a suitable secondary font, however it doesn't look desirable under the same font size as my primary choice. Is it possible to set a conditional secondary font with a differing font size? What I'm saying here could be irrelevant so any help would be much appreciated, the solution may be simpler than I think.

Many thanks.