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

Question

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

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

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

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

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

Спасибо.

Answer 1

Попробуйте Листаматик :

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

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

Answer 2

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

Answer 3

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