Закругленные уголки в Опере

[Sedoj]

Всем привет.

Задача: сделать закругленное (верхняя часть) меню из четырех пунктов. Проблема в том, что фон основного сайта отличается от меню из-за этого видны рамки пунктов (ведь опере не закругляет углы без border), ну и с hover конечно же проблема.

Мое решение: добавил дополнительный элемент с картинкой - закругленные уголки в цвет основного фона + position:absolute в результате чего картинка перекрывает все мои недочеты.

help решение очень некрасивое, посоветуйте в каком направлении покопать чтобы решить на css без доп элементов html и картинок (без js и т.п.), буду очень признателен (IE 8+).

Пример здесь Если раскомментируете стиль test, будет видно мое "решение".

Маленькое дополнение:

на локальном компьютере все Ок во всех браузерерах, на хостинге проблема отображается только в Опере.

Edited October 17, 2012 by Sedoj

[mrnobody]

Вот как сделал: http://jsfiddle.net/suX7w/1/

Аааа, еще и IE8 нужен (.

Можно воспользоваться изящной деградацией

Немножко доработал под IE8 — http://jsfiddle.net/suX7w/2/

Не знаю, сойдет так или можно еще проще сделать.

Edited October 17, 2012 by mrnobody

[Sedoj]

mrnobody, спасибо, а ведь я же еще и подумал про псевдоклассы.

Т.е, в первом случае, мы используем css3 для подсчета элементов и присваиваем первому и последнему стили со скругленными рамками без цвета. Во втором, дополняем первый и последний элемент соответствующими классами и добавлем им псеводэлемент before (чтобы не использовать дополнительный Html код) и им уже присваиваем абсолютную позицию и фон в виде картинки со скругленными уголками.

Изящной деградацией пользуюсь когда делаю для себя, здесь немного иной случай.

Заметил в коде prefixfree, это для градиентов, я правильно понял? Что-то я еще до этого скрипта на добрался в изучении.

Спасибо.

ps

Меня пугали, что last-child может тормозить процесс из-за особенностей подсчета элементов, действительно ли сильно влияет?

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

Edited October 18, 2012 by Sedoj

[mrnobody]

Заметил в коде prefixfree, это для градиентов, я правильно понял? Что-то я еще до этого скрипта на добрался в изучении.

С этим скриптом свойства можно писать без префиксов, он сам автоматически поставит префикс в зависимости от браузера.

[Sedoj]

mrnobody, спасибо, я так и понял, только почему то еще не использую, думаю пора, с этого макета начну. Только поделитесь опытом, этот скрипт обновляется или его можно загружать с хостинга? (чтобы сократить кол-во загружаемых js файлов)

Edited October 19, 2012 by Sedoj

[mrnobody]

На счет обновления не могу сказать, этот скрипт показал Sorax в 19 видео о анимации _http://artsorax.wordpress.com/.

Edited October 19, 2012 by mrnobody