Скруглить углы не получается.
Прошу помощи форумчан. В общем, проблема такая: на сайте есть виджет контактика. Вот его код:
<script type="text/javascript" src="http://userapi.com/js/api/openapi.js?52"></script>
<div id="vk_group" class="shadow"></div>
<script type="text/javascript">
VK.Widgets.Group("vk_group", {mode: 0, wide: 0, width: "215", height: "360"}, 27524844);
</script>
Это все как-то работает и выдает группу. Появилась необходимость сделать закругленные углы. Первое решение поместить в <div> со свойствами: overflow: hidden; border-radius: 10px; Остальные, думаю нет смысла приводить. Работает, но только в ff. В Chrom все так же углы прямые. Потом пытался задать это свойство самому div с виджетом: #vk_group{
border-radius: 10px;
}
Все равно в хроме не работает. Подскажите, пожалуйста, в чем мой косяк? |
попробуй -webkit-border-radius:10px;
|
вообще стоит задавать стиль так
border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px; |
Сделал даже так:
border: 1px solid #B3CBAE; -moz-border-radius: 10px; -webkit-border-radius: 10px; -khtml-border-radius: 10px; -o-border-radius: 10px; -icab- border-radius: 10px; border-radius: 10px; Эффект тот же: в хроме рамка с закругленными углами, но содержимое торчит из нее: http://imm.io/PFjs Очень прошу еще что-нибудь подсказать. |
знаешь просто скрипт вставляет что-то в тот DIV который ты закругляешь, попробуй узнать что туда вставляется например с помощью Opera Dragonfly, возможно там iframe (обычно они используюся для всяких виджетов)
Не знаю точно скругляются ли iframe'ы |
да так и есть там iframe
|
<style>
.rounded {
border-radius: 50px;
font-size: 50px;
height: 55px;
border: 1px solid black;
margin: 20px;
}
.hidden {
overflow: hidden;
}
.red {
background-color: red;
}
</style>
<div class="rounded"><div class="red">aa</div></div>
<div class="rounded hidden"><div class="red">aa</div></div>
|
нашел друг, укажи в стилях
#vkwidget1{border-radius:20px 20px 20px 20px} так как он вставляет в div iframe c id ='vkwidget1' хотя наверное лучше будет #vk_group iframe{border-radius:20px 20px 20px 20px и так далее по списку} |
bushstas, Спасибо огромное. Не знаю, почему, но Ваш вариант сработал.
Sanda, Да, у меня с 2мя div то же все без проблем работает. Однако проблемы начались с iframe, а так же когда внутри таблица была, в которой верхная и нижняя ячейка имеет градиентный фон (картинка в 1px шириной repeat-x). Пришлось отдельно им стили задавать с закруглением 2х углов. (если нужно - могу вылжить разметку как работает и как не работает.) Проблема наблюдается только в некоторых версиях Хрома, в других браузерах не видел. С чем связана понять не могу. Необходимость еще раз содержимое закруглять бесит страшно. Всем большое спасибо за помощь. |
| Часовой пояс GMT +3, время: 21:39. |