css3

[kamaz6141]

День добрый, вобщем начал верстать шаблон и наткнулся на непонятную проблему...

В IE9 и Опере не работают

box-shadow

и

border-radius

а в мазиле всё нормально...понять не могу, вроде они с сss3 дружат

[Softlink]

Показывайте код.

[kamaz6141]

<div class="content">
 <div class="story">
	<h3 class="title">title</h3>
    <div class="text">
        .....
    </div>
    <div class="info">
        <span style="float:left;padding:8px 0 0 40px;">Created by author on date </span>
        <span style="float:right;padding:11px 40px 0 0;">rating</span>
    </div>
 </div>
</div>

.content{width:auto;margin:78px 248px 80px 248px;}
.story{
    background:url(../images/content-bg.png) repeat;
    overflow:hidden;
    margin-bottom:24px;
    box-shadow:0 0 30px rgb(0,0,0,0.7);
    -webkit-box-shadow:0 0 30px rgb(0,0,0,0.7);
    -moz-box-shadow:0 0 30px rgb(0,0,0,0.7);
    border-radius:50px;
    -webkit-border-radius:50px;
    -moz-border-radius:50px;
}
.story .text{padding:0 25px 25px 25px;}
.story .title{padding:0 0 0 30px;}
.story .info{height:40px;background-color:#d7d7d7;}

Edited January 28, 2012 by kamaz6141

[Softlink]

Правильно писать rgba, а не rgb. Все работает. Кроме того уже можно не использовать префиксы для border-radius. Большинство современных браузеров понимают это свойство без них. А если уж и используете, то ставьте его по коду ниже, т.е. после префиксов.

[kamaz6141]

О боже, аж стыдно спасибо) Но одна из проблем с оперой осталась...вот:

Edited January 28, 2012 by kamaz6141

[Softlink]

Насколько видно из рисунка вы сделали так: взяли большой блок и скруглили его, наложили ему тень, а нижний блок положили просто поверх него. В результате получилось, что скругления верхнего блока не совпадают со скруглениями нижнего. Свойство border-radius позволяет скруглять каждый угол по отдельности, поэтому делайте общий контейнер, скругляйте нужные углы и накладывайте тень уже на него. Примерно так.

[kamaz6141]

Хм..да, я скруглил большой блок, но нижний блок он вложен внутрь большого, а у большого overflow:hidden прописан, вроде как нижний блок должен не вылезать за большой ну может я и ошибюсь) Ну все равно спасибо =)

[Softlink]

Хм..да, я скруглил большой блок, но нижний блок он вложен внутрь большого, а у большого overflow:hidden прописан, вроде как нижний блок должен не вылезать за большой ну может я и ошибюсь) Ну все равно спасибо =)

Можно делать и с overflow, но у вас тень-то зависит от скругления обертки и это отчетливо видно на рисунке.

[kamaz6141]

Точно) Разобрался) Большое спасибо)