Не срабатывает border-radius у блока с картинкой в Опере

[vetWeb]

Доброго дня всем! Не могу понять почему не срабатывает border-radius у блока с картинкой. Сама же картинка не огругляется блоком.

вот кусок кода

.slides li .white {
display: block;
width: 173px;
height: 178px;
background: #fff;
margin: 0 auto;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
-o-border-radius: 50%;
overflow: hidden;
position: relative;
}

<span class="white">
<img class="item_img" src="картинка.jpg" alt="картинка" />
</span>

Если интересно, то подробней можно посмотреть здесь http://hand-made-beauty.ru/
Там блок "Хиты продаж".

Спасибо!

 

[RurCur]

в опера постоянно такая проблема, сам с этим не раз сталкивался и также решения не придумал(просто обычно отказываюсь от применения border-radius к img)

 

[vetWeb]

Так там не border-radius у img)

Там div с border-radius а в нем img который обрезаться должен). Ну тут не отступить от этого, так как дизайн макета такой)

 

[mrlasking]

http://clip2net.com/s/2SMrC - вот скрин из оперы, результата нужного вам я добился.

Объясняю.
То, что есть:

<li class="R2D2 roundedCorners">
<span class="white">		
<img class="item_img" itemprop="image" src="%img_url%" alt="винтажные серьги">						
<span class="hoveritem" style="opacity: 0;">
....
</span>
</span>
<table class="buy">
....
</table>
</li>

Что мы делаем:

<img class="item_img" itemprop="image" src="%img_url%" alt="винтажные серьги">

вставку картинки выбрасываем нафик, убираем прозрачность со span.hoveritem и задаем выброшенную картинку, как фон span.hoveritem. Что бы дифференцировать элементы списка, можно использовать id или компоновать стили. Таким образом, у каждого li будет свой фон. Выставляем border-radius=50%, где его не хватит
...
profit!

P.S.
Конструкция вида li>span>(img+span)+table, да еще и с кучей br-ов внутри, вызывает коллапс мозга. Прочитайте про section,article, и проч., ато странно видеть подобное, рядом с микроформатами и прочими прелестями. Кстати, вопрос о выборе доктайпа - для меня остался без ответа *crazy*

 

[vetWeb]

Спасибо, за столь развернутый ответ!
Если я правильно Вас понял, то получается картинка будет фоном блока.
Но у меня это не статичные картинки, а картинки элемента, которые тянутся из инфоблока. в связи с чем фоном сделать не получится.
Да надо почитать про эти вещи. Согласен.

А что с доктайпом не так?)

 

[mrlasking]

Но у меня это не статичные картинки, а картинки элемента, которые тянутся из инфоблока. в связи с чем фоном сделать не получится.

Все получится, если, в должной мере, постараться Такова уж участь верстальщика, что приходится писать костыли и искать решения, что бы сделать очередную красивость, когда:

Ну тут не отступить от этого, так как дизайн макета такой)

Вариант решения "налету":
Формируем список "Хиты продаж", в самом начале. В хеде пишем костылек в виде:

<style>
.hoverItem.item_0 {background: url('%img_link%');}
.hoverItem.item_1 {background: url('%img_link%');}
.hoverItem.item_2 {background: url('%img_link%');}
...
.hoverItem.item_$ {background: url('%img_link%');}
</style>

Ну а в выводе блока "хиты продаж", расставляем, по очереди, доп классы: item_1,item_2,item_3,..,item_$.
...
profit! ^_^

 

[vetWeb]

Может я не совсем понимаю, но как проставить эти item_1, item_2 и др., если список "Хиты продаж" формируется на лету

<?=$arItem["DETAIL_PICTURE"]["SRC"]?>

и не известно сколько будет элементов. И как php код в css можно вставить ?

 

[lekzd]

и не известно сколько будет элементов. И как php код в css можно вставить ?

inline-стилями

например:

<div style="<?if ($v == '2'){?>background: #c00<?} else {?>background: #f00<?}?>">

 

[vetWeb]

Спасибо, большое! Попробую.