Unordered list navigation - horizontal, fixed width and word breaking

Question

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><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.

Answer 1

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

Answer 2

Try Listamatic:

http://css.maxdesign.com.au/listamatic/

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

Answer 3

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