• Добро пожаловать на инвестиционный форум!

    Во всем многообразии инвестиций трудно разобраться. MMGP станет вашим надежным помощником и путеводителем в мире инвестиций. Только самые последние тренды, передовые технологии и новые возможности. 400 тысяч пользователей уже выбрали нас. Самые актуальные новости, проверенные стратегии и способы заработка. Сюда люди приходят поделиться своим опытом, найти и обсудить новые перспективы. 16 миллионов сообщений, оставленных нашими пользователями, содержат их бесценный опыт и знания. Присоединяйтесь и вы!

    Впрочем, для начала надо зарегистрироваться!
  • 🐑 Моисей водил бесплатно. А мы платим, хотя тоже планируем работать 40 лет! Принимай участие в партнеской программе MMGP
  • 📝 Знаешь буквы и умеешь их компоновать? Платим. Дорого. Бессрочная акция от MMGP: "ОПЛАТА ЗА СООБЩЕНИЯ"

Беда с блоками

johnnyParazit

Специалист
Регистрация
21.08.2013
Сообщения
652
Реакции
104
Поинты
0.000
Ребята беда с блоками, сломал себе уже всю голову!


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 блока!
 
Последнее редактирование:

Sublime

Интересующийся
Регистрация
05.12.2013
Сообщения
10
Реакции
5
Поинты
0.000
border-radius:10px в IE не работает.. в старых версиях ие эффекта можно добиться с использованием PIE. и относительно блоков - много лишнего.. зачем к примеру list-style:none? потом. display:table? высота то и так фиксирована.. vartical-align:top; в свойства контента вставить.. что б вложенные блоки выравнивались по высоте.
 

johnnyParazit

Специалист
Регистрация
21.08.2013
Сообщения
652
Реакции
104
Поинты
0.000
Отказался я от использования border-radius! все эти хаки под IE достали.. только код портят! куча лишнего и некрасивого! пусть будут квадратные..
 

Starsh

Интересующийся
Регистрация
15.10.2014
Сообщения
23
Реакции
0
Поинты
0.000
а под браузер Comodo?
 

Коля Середа

Интересующийся
Регистрация
20.10.2014
Сообщения
50
Реакции
4
Поинты
0.000
Border radius в ie старых версиях не работает.
Добавьте селектор со свойствами:
Код:
* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	box-sizing: border-box;
}
Эти свойства включают padding и border в заданную ширину блока(45%), а так получалось что ширина 45% + 1px border + 10px padding, и блоки не помещались вместе в родительский контейнер по ширине. И раз вы задаете ширину в % то и маргины советовал бы тоже в % задавать, тоесть блок шириной 45% + маргин 2,5%
jsfiddle.net/aopsyh6L/2/
да и вообще, зачем столько лишнего кода, вот я вам упростил http://jsfiddle.net/aopsyh6L/3/
свойства:
Код:
display: table;
display: inline-block;
*display: inline;
можно заменить свойством "float: left;"
 
Последнее редактирование:
Сверху Снизу