Навигация по неупорядоченному списку - горизонтальная, фиксированная ширина и разбиение слов

Question

Я хотел бы использовать неупорядоченный список для отображения горизонтальной навигации. Этот nav должен быть фиксированной шириной.

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> 

И CSS (до сих пор):

#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; } 

Если светлячок, используя пробельные: до разрыва строки слова по мере необходимости, чтобы соответствовать ширине ул. Это не работает в IE6 или IE7, и мне нужно ударить по этим браузерам. В IE lis нажимает на следующую строку вместо того, чтобы сломать слова в якорях.
не является вариантом, так как в какой-то момент это будет управляться контентом.

Как я могу заставить якоря сломать слова в соответствии с доступным пространством? Я не могу указать общую ширину для элементов списка, так что это не вариант.

alt text http://i49.tinypic.com/2qaqry8.jpg

И как это должно выглядеть:

alt text http://i46.tinypic.com/5ofcd4.jpg

Спасибо.

Answer 1

pre-wrap и pre-line не поддерживаются в IE < 8. Так что я не уверен, что альтернатива, не прибегая к table :-(

Answer 2

Попробуйте Listamatic:

Вы можете взять простой список и использовать разные каскадные таблицы стилей для создания радикально разных вариантов списка? Listamatic показывает мощь CSS при применении к одному простому списку.

Выберите список, там вы сможете найти неупорядоченное меню.

Answer 3

Это не проверено, но установка ширины на вашем ли должна делать трюк.