Preventing line wrapping in CSS layouts

Question

My CSS designer has made a design where there are two ul siblings laid out left to right. The layout is done by specifying the width of the ul tags.

He is using Firefox on Windows where everything looks fine. I am using Firefox on OS X where the contents of one of the li tags has too much text so it flows to another line. The design was made with the intention that the text is on one line.

There are a couple considerations to make:

• I want the the ul tags to go left to right, not top to bottom
• I want the solution to be i18n friendly (translating the strings should not cause them to break into two lines)

If this is defined in pixels why does it appear differently in OS X compared to Windows even in the same browser?

Is there a general CSS solution that can prevent wrapping lines or prevent the page from looking different in respect to line wrapping between OS X and Windows? Or is this a lost cause?

Answer 1

Setting white-space: nowrap on the uls will prevent the text from wrapping, ever, until a <br /> is not found. As much as I understand, the lists are already horizontal, but for completeness' sake, you can do it by making the li elements display: inline or display: inline-block. The white-space: nowrap will not work for floated list items.

References: the white-space property at W3Schools, cross-browser display: inline-block

Answer 2

It's possible, that setting width: auto; for those elements, could fix it too.