CSS3 border-radius на дисплее: table-row element

Это мой макет:

<div class="divContainer">
        <div class="item">
            <div class="itemHeader"></div>
            <div class="itemBody"><div>
            <div class="itemFlag"></div>
        </div>
        ....
</div>

И CSS:

.divContainer{
    display:table;
    border-spacing:0 5px; //bottom spacing
    width:100%;
}

.item{
    display:table-row;
    height:45px;
   -moz-border-radius:10px;
   -webkit-border-radius:10px;
   border-radius:10px;
}

.itemHeader, .itemBody, .itemFlag{
    display:table-cell;
}

.itemHeader{
    width:100px;
}

.itemBody{
    width:150px;
}

.itemFlag{
    width:20px;

}

Круглые границы не отображаются на элемент элементов.
Если я помещу их отдельно в itemHeader и itemFlag , они появятся.
Но я бы очень хотел очистить код и поместить его в элемент

Также не могу заставить радиус работать с классом divContainer . Мне нужен округлый контейнер, содержащий округленные строки.

В чем проблема? Возможно, другая часть CSS испортила это, но я не думаю, что это так.

13
задан ZolaKt 7 March 2011 в 01:11
поделиться