Unordered list navigation - horizontal, fixed width and word breaking

I'd like to use an unordered list for displayign a horizontal navigation. This nav has to be a fixed width.

Markup:

<ul id="page-nav">
    <li><a href="#">RRSP Basics</a></li>
    <li><a href="#">Contribution Rules</a></li>
    <li><a href="#">Ways to Fund Your RRSP</a></li>
    <li>开发者_StackOverflow中文版<a href="#">Investment Options</a></li>
</ul>  

And the CSS (so far):

#page-nav { width: 423px; height: 57px; margin: 0; padding: 0; }
#page-nav li { list-style: none; float: left; display: block; height: 35px; margin: 13px 8px 0 8px; padding: 9px 14px 0 14px; text-align: center; }
#page-nav li a { color: #1f1f1f; font-size: 10px; white-space: pre-line; }

If firefox, using white-space: pre-line breaks the words as necessary to fit the ul width. This doesn't work in IE6 or IE7, and I need to hit those browsers. In IE, the lis push down to the next line instead of breaking the words in the anchors.

is not an option either as this will be content managed at some point.

How can I make the anchors break the words to fit the space available? I can't specify a common width for the list items, so that's not an option.

And how it should look:

Thanks.

Try Listamatic:

Can you take a simple list and use different Cascading Style Sheets to create radically different list options? The Listamatic shows the power of CSS when applied to one simple list.

Pick a list, you should be able to find an unordered list menu there that works.

pre-wrap and pre-line are not supported in IE < 8. So im not sure what an alternative is without resorting to a table :-(

This is untested, but setting a width on your li should do the trick.