Верстка нестандартного меню

[Avro]

Приветствую. Целый день не мог решить задачу. Вот решил наконец к вам обратиться. Значит задача состояла в следующем: необходимо сверстать горизонтальное меню с закругленными по краям углами. На момент клика (я так понял a:active) должны подключаться спрайты. Меню должно тянуться по разрешению экрана до 1660рх. Естественно IE7+ и полное прохождение валидации. С виду задача не очень сложная, но приступив к работе вошел в ступор. Как быть с закругленными краями, чтоб они так же реагировали на клик элемента и при этом элемент списка тянулся по тексту. Вот, прошу помощи. Вот то, что пока получилось. Не работает в опере и естественно в IE7. И нет резины по ширине экрана.

[ceil100]

левые же углы реагируют

[Avro]

Там стоит тег <p>, который не реагирует на клик в опере и IE. Это не совсем правильное решение. Хочу услышать совет как правильно.

Edited November 4, 2011 by Avro

[Radiocity]

1) Можно попробовать поиграть с селекторами :before и :after, но они не работают в IE6, IE7

2) Уберите p. Замените на span.

3) Первый и последний элементы у Вас различаются:

<li class="first"><p class="first" onclick="b"><a href="#">Каталог</a></p></li>

<!-- ... -->

<li><a class="last" href="#">Новости</a><p class="last"></p></li>

[Avro]

2. span покажет ошибку валидации т.к. это является строчным элементом

3. да, там иргался с onclick. Забыл удалить. И в теге "р" залючено скругление