Беда с блоками
Ребята беда с блоками, сломал себе уже всю голову!
Код HTML:
<div id="content"> /* Общий контейнер */
<div class="block">
<h1>Блок 1</h1>
</div>
<div class="block">
<h1>Блок 2</h1>
</div>
</div>
Код HTML:
#content {
width: 100%; /* По всей ширине*/
height: 500px; /* Высота контейнера 500px*/
margin-top: 50px; /* Отступ в 50px сверху*/
}
.block {
list-style: none;
text-align: center;
display: table;
display: inline-block;
*display: inline;
zoom: 1;
border: 1px solid #333;
margin: 10px; /* Отступы */
width: 45%; /* Ширина блока */
height: 450px; /* Высота блока */
color: #ffffff; /* цвет текста */
padding: 10px; /*отступы */
text-align: justify;
background: #b3b3b3; /* фон блока */
-moz-border-radius: 10px; /* закругление для старых Mozilla Firefox */
-webkit-border-radius: 10px; /* закругление для старых Chrome и Safari */
-khtml-border-radius:10px; /* закругл. для браузера Konquerer системы Linux */
border-radius: 10px; /* закругление углов для всех, кто понимает */
}
1. Проблема в том, что в Internet Explorer все ок! А вот в Google Chrome, как только я добавляю в 1 блок <p> Какой нибудь текст</p> второй съезжает вниз! Почему?
2. По оформлению самих блогов в Google Chrome все отлично, а вот в Interne Explorer углы не закругленные! Почему?
добавлено через 26 минут
Добавил vertical-align: top;
Решило проблему со сдвигом 2 блока!