не отображается вебкит в сафари и хром

[NikNak]

Это черновой вариант страницы для теста использования закругления углов средствами CSS.

Интересно то, что при первом просмотре всё работало, но потом перестало просто отображаться в хром и яндекс интернет.

Как оказалось также не работает и в сафари. Думаю что-то я не так ввёл а теперь не могу разобраться где накосячил.

К стати если выложите как можно упростить данный код буду так же признателен.

    BODY {
    text-align: center; /* Выравнивание блока по центру */
    margin-top: 0;
    }

    A IMG {
    border: none; /* Убираем границу */
    }

    .os {
    background: url(images/fon.png) repeat-x right top; 
    margin: auto; /* Отступы вокруг блока */
    width: 800px; /* Ширина блока */
    background-color: #fff;
	  -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
	  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
	  box-shadow: 0 0 12px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
    }

    .vl {
    margin: auto;
    width: 98%; /* Ширина блока */
    background: #808080; /* Цвет фона */
    -moz-border-radius: 10px; /* Для Firefox 3 */
    -webkit-border-radius: 10px; /* Для Safari 4 и Chrome */
    border-radius: 10px; /* Для современных браузеров */
    }

   #leftcol { /* Левая колонка*/ 
    width: 530px; /* Ширина слоя */ 
    float: left; /* Состыковка с соседним слоем */ 
    background: #fff; /* Цвет фона левой колонки */ 
    margin-left: 5px;
    margin-top: 13px;
   }
   #rightcol { /* Правая колонка*/
    width: 240px; 
    ~background: #e0e0e0; /* Цвет фона правой колонки */ 
    float: right;
    margin: 3px;
   }

    .ava {
    ~background: url(images/NikNak.jpg); 
    margin: 10px; /* Отступы вокруг блока */
    width: 220px; /* Ширина блока */
    }

    card {
    margin: 10px; /* Отступы вокруг блока */
    width: 220px;
    height: 150px;
	  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
	  -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
	  box-shadow: 0 0 12px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
    }

[wwt]

 не отображается вебкит в сафари и хром помогите разобраться почему так происходит 

А фик знает почему вебкит не отображается в сафари и хроме )))

...но потом перестало просто отображаться в хром и яндекс интернет...

даже боюсь спрашивать - "У Яндекса есть свой интернет?"

Ну и по делу:

.vl {
    margin: auto;
    width: 98%; /* Ширина блока */
    background: #808080; /* Цвет фона */
    -moz-border-radius: 10px; /* Для Firefox 3 */
    -webkit-border-radius: 10px; /* Для Safari 4 и Chrome */
    border-radius: 10px; /* Для современных браузеров */
    }

Скругление задано, а сама граница нет. Задайте сам border то.

Edited October 8, 2012 by wwt

[NikNak]

имеется в виду яндекс браузер имя которому интернет

да я это заметил когда статью уже выложил... теперь трабл в другом.

эти настройки не применяются если не указана высота слоя.

но если указать в процентном соотношении высоту, то

слой не растягивается вниз именно в сафари и хроме.

пропадает резиновая функция... что делать