Почему в IE третий блок получаеться снизу!?

WEB_bobby · July 11, 2007

Почему в IE третий блок получаеться снизу!? Не могу понять что являеться причиной!

Трехпиксельный баг IE- 6ого? - Да я б не сказал, потому что один процент равен 10 пикселям,

а так как один процент я оставил свободным, то получаеться, что по-любому в запасе остается еще один пиксель даже если баг имеет место!

Что же здесь его не устраивает?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<title>Test</title>
	<style type ="text/CSS">
		* {margin: 0; padding: 0; border:0 }
		body {background-color:#00222a;}

		.leftDiv{margin:0 0 0 3%;}
		.middleDiv{margin:0 3% 0 3%;}
		.rightDiv{margin:0 3% 0 0;}

		#officeDiv{width:29%; height:293px; background-color:#ffffff; float:left;}

		#bossDiv{width:29%; height:293px; background-color:#ffffff; float:left;}

		#chairsDiv{width:29%; height:293px; background-color:#ffffff; float:left;} 		
	</style>
</head>

<body>

<div class= "leftDiv" id= "officeDiv"></div>
<div class= "middleDiv" id= "bossDiv"></div>
<div class= "rightDiv" id= "chairsDiv"></div>

</body>
</html>

elaphus.vitality · July 11, 2007

Потому что на страницу не вмещается.

Поставь процентов 27 или 28, + код у тебя какой-то экстремальный, можно было все по проще сделать...

Fed · July 11, 2007

и с чего вы решили что 1% - 10пикселей?) не очень понял

WEB_bobby · July 11, 2007

и с чего вы решили что 1% - 10пикселей?) не очень понял

1003/100 =10,03 пикселя на один процент.

Fed · July 11, 2007

логично

WEB_bobby · July 11, 2007

Потому что на страницу не вмещается.
Поставь процентов 27 или 28, + код у тебя какой-то экстремальный, можно было все по проще сделать...

это я понимаю, что из за того что на нстраницу не вмещаеться)).

Конечно спасибо за желание помочь,но поставив 27% или 28% - это значит так и не разобраться в причине.Да и мне нужно именно по 29%!

Fu-tai · July 11, 2007

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>ничего себе колоночки</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
* {
margin: 0;
padding: 0;
border: 0;
background-color:#000000;
}
body {
width:94%;
margin: 0 auto;
}
div {
width:29%;
height:293px;
background-color:#ffffff;
float:left;
margin: 0 3%;
}
.krl {
margin-left: 0;
}
.krr {
margin-right:0;
}
</style>
</head>

<body>
<div class="krl"></div>
<div></div>
<div class="krr"></div>
</body>
</html>

Доработать конешно нужно, но думаю идея понятна...

WEB_bobby · July 11, 2007

Приведенный код при запуске в IE дает просто пустое белое окно, потому что в титле написан руссим шрифтом. Такой эффект по крайней мере у меня наблюдается.

Вот заточил тест-код немного по другому - не в body теперь слои кладуться, а в оберточный слой.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>not so bad columns</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
* {
margin: 0;
padding: 0;
border: 0;
background-color:#000000;
}
#coverDiv{
width:94%;
margin: 0 auto;
}

#sr {
width:29%;
height:293px;
background-color:#ffffff;
float:left;
margin: 0 3%;
}
#krl {
width:29%;
height:293px;
background-color:#ffffff;
float:left;
margin: 0 3%;
margin-left: 0;
}
#krr {
margin-right:0;
width:29%;
height:293px;
background-color:#ffffff;
float:left;
margin: 0 3%;
margin-right:0;
}
</style>
</head>

<body>
<div id ="coverDiv" >
	<div id="krl"></div>
	<div id ="sr"></div>
	<div id="krr"></div>
</div>
</body>
</html>

WEB_bobby · July 14, 2007

Вот такой полтергейтст выходит!

Есть три блока по 29% и средний блок марджиниться от левого и правого на 3%.

Следовательно в суме с марджинами их длина равна 93%! Ну и вот. Кладу их я в блок "cover" шириной в 93% и ему задаю ему автоматический марджин для выравнивания по горизонатли!

Запустите это код в IE и вы увидете всю картину целиком! Увидите то что "cover" действительно выраниваеться ровно по центру.. но! шириной он не 93% - видите справа широкую черную полосу? Откуда она береться? Я уже и margin:0 0 0 0; задал правому блоку - все бестолку! Все равно этот отступ откудато береться! Кстати щас выяснил что блоки не 29% получаються а менше - не ну это уже не в какие ворота вообще не лезет!

Кстати почему в Мозилле и Опере не виден черный фон для "cover" - ??

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns= "http://www.w3.org/1999/xhtml">

<html>
<head>
 <META HTTP-EQUIV= "Content-Type" CONTENT= "text/html; charset= windows-1251">
 <title>Untitled</title>
 <style type ="text/CSS">
 * {
 margin: 0;
 padding: 0;
 border:0;
 }


 body {
 background-color:#F0ECE5;
 }

 .cover{
 width:93%;
 margin: 0 auto;
 background-color:#000000;
 }

 .lBox {
 width:29%;
 height:293px;
 background-color:#ffffff;
 float:left;
 }

 .mBox {
 width:29%;
 height:293px;
 background-color:#ffffff;
 margin: 0 3%;
 float:left;
 }

 .rBox {
 width:29%;
 height:293px;
 background-color:#ffffff;
 float:left;
 margin:0 0 0 0;
 }
 </style>
</head>

<body>
 <div class ="cover">
 <div class="lBox"></div>
 <div class ="mBox"></div>
 <div class="rBox"></div>

 </div>
</body>
</html>

yopopt · July 14, 2007

1. Ширина блоков считается не от ширины экрана, а от блока сover

2. Чтобы появился фон добавьте высоту в блок cover.

WEB_bobby · July 14, 2007

1. Ширина блоков считается не от ширины экрана, а от блока сover
2. Чтобы появился фон добавьте высоту в блок cover.

упс!

Sign In

Почему в IE третий блок получаеться снизу!?

Question

Link to comment

Share on other sites

10 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Обсуждения

Important Information