Проблема горизонтального меню CSS: не будет работать в IE7

Question

Не могли бы вы помочь мне исправить меню на этой этой странице ? Элементы списка меню не имеют определенной ширины, поэтому они отображаются на 100% ширины в IE7. Если я сделаю для span.right значение float: left, это решит проблему, но закругленные углы не сработают. Возможное решение может состоять в том, чтобы избавиться от правильного промежутка и установить отступ и фоновое изображение для якоря, но это: a) не даст мне возможности использовать фоновое изображение на якоре (для этого примера, я полагаю, будет сплошной цвет) и б) потребовать разбить menu.png на отдельные файлы изображений.

Если у вас есть хорошие предложения, дайте мне знать. Спасибо!

Answer 1

Если вы переместите фактический текст в середину между <span class="left"></span> и <span class="right"></span> и включите его в теги <span>:

<li><a href="#">
    <span class="left"></span>
    <span>Home</span>
    <span class="right"></span>
</a></li>

Затем вы можете добавить правило CSS:

#menu ul li a span
{
    float: left;
}

Затем удалите float: left; из span.left и span.right. Это должно хорошо работать как в Firefox, так и в IE 7, и я предполагаю, что большинство других браузеров тоже. Конечно, это будет работать только в том случае, если вы согласны с небольшой реструктуризацией HTML.