CSS. Проблема в IE с блочной версткой

Статус
В этой теме нельзя размещать новые ответы.
dreamerrr

dreamerrr

Постоялец
Регистрация
2 Янв 2009
Сообщения
94
Реакции
50
Здравствуйте. Столкнулся с такой проблемой.
Верстка DIV`ами. Есть 4 квадратных блока (пусть по 100px),расположенных в ряд (position:relative) помещенные в другой див (400px). Во всех браузерах, окромя IE отображается нормально, "ровненько". В IE (и в 6-ом и в 8-ом) эти вложенные дивы уходят ступеньками вниз. Как исправить?
 

Вложения

  • fuck.gif
    fuck.gif
    16,6 KB · Просмотры: 16
Данных недостаточно (приведите хтмл и цсс).
На данном этапе могу посоветовать использовать
display:inline;
для позиционирования блоков по горизонтали.
 
HTML:

Код: 
<body>

<div id="main">

<div id="boss">

</div>

<div id="sub">

</div>

<div id="unit">

<div id="box1">

</div>

<div id="box2">

</div>

<div id="box3">

</div>

<div id="box4">

</div>

</div>


</div>
</body>

CSS:

Код: 
@charset "utf-8";
/* CSS Document */
* {	margin:0; padding:0;}

body {background-color:#CCC;
	text-align:center;}

#main {
	background-color:#FFF;
	width:416px;
	height:400px;
	border:1px;
	margin:0 auto;
	padding:10;
	}
#main img {
	border:none;
	text-decoration:none;}
	
#boss {
	
	width:143px;
	height:44px;
	margin:auto;
	}
	
#sub {
	
	width:143px;
	height:44px;
	margin:auto;
	margin-top:30px;}

#unit {
	text-align:left;
	margin:auto;
	width:410px;
	height:57px;
	margin-left:0;
	margin-top:30px;
	}

#box1 {
	width:103px;
	height:57px;
	margin-top:0;
	margin-left:0;}
	
#box2 {
	width:103px;
	height:57px;
	position:relative;
	margin-top:-57px;
	margin-left:105px;
	}
	
#box3 {
	width:103px;
	height:57px;
	position:relative;
	margin-top:-57px;
	margin-left:208px;}
	
#box4 {
	width:103px;
	height:57px;
	position:relative;
	margin-top:-57px;
	margin-left:312px;
	}
 
можете сделать данные блоки элементами списка, примерно так
HTML: 
<ul>
<li><div id="нужный ид">...</div></li>
...
<li><div id="нужный ид">...</div></li>
</ul>
элементам списка пропишите display: inline;
плюс такого решения в том, что оно будет работать хоть для трех, хоть для тридцати элементов...
 
Можно попробовать добавить
HTML: 
#main div { float:left;}
 
Измените стили на следующие:
Код: 
#box1 {
        display:inline-block;
	width:103px;
	height:57px;
}
#box2 {
        display:inline-block;
	width:103px;
	height:57px;
}
#box3 {
        display:inline-block;
	width:103px;
	height:57px;
}
#box4 {
        display:inline-block;
	width:103px;
	height:57px;
}
Остается непонятным, зачем вам высчитывать марджины для каждого блока, когда есть инструменты для ваших целей.

Старые ИЕ не знают inline-block, для них используйте
Код: 
display: inline;
zoom: 1;
 
ercalote написал(а):
Измените стили на следующие:
Код: 
#box1 {
        display:inline-block;
	width:103px;
	height:57px;
}
#box2 {
        display:inline-block;
	width:103px;
	height:57px;
}
#box3 {
        display:inline-block;
	width:103px;
	height:57px;
}
#box4 {
        display:inline-block;
	width:103px;
	height:57px;
}
Остается непонятным, зачем вам высчитывать марджины для каждого блока, когда есть инструменты для ваших целей.
Старые ИЕ не знают inline-block, для них используйте
Код: 
display: inline;
zoom: 1;
Нажмите для раскрытия...

Воспользовался display:inline-block
В IE (8) дивы вовсе оказались друг под другом.

__
Приведенные еще выше рецепты не помогли, к сожалению
 
Во-первых обязательно проставьте корректный DOCTYPE. Во вторых для позиционирования в ряд лучше использовать float: left;, т.к. inline-block поддерживают не все, а делая блоки просто inline'овыми мы теряем возможность задавать высоту и ширину. Следовательно CSS код можно значительно сократить до:
Код: 
@charset "utf-8";
* {	margin:0; padding:0;}
body {background-color:#CCC;
	text-align:center;}
#main {
	background-color:#FFF;
	width:416px;
	height:400px;
	border:1px;
	margin:0 auto;
	padding:10;
	}
#main img {
	border:none;
	text-decoration:none;}
#boss {
	width:143px;
	height:44px;
	margin:auto;
	}
#sub {
	width:143px;
	height:44px;
	margin:auto;
	margin-top:30px;}
#unit {
	text-align:left;
	margin:auto;
	width:412px;
	height:57px;
	margin-left:0;
	margin-top:30px;
    overflow: hidden;
	}
#box1,#box2,#box3,#box4 {
      width:103px;
      height:57px;
      float:left;
    }
 
то что opere-хорошо, то ie -смерть

Вот мож пригодиться Для просмотра ссылки Войди или Зарегистрируйся
Попробуй - Персональные CSS-хаки.У меня эта страничка долгое время была в закладках
 
Статус
В этой теме нельзя размещать новые ответы.
Назад
Сверху