margin-left в IE6 удваивается

rokkkky · December 28, 2008

В IE6 удваивается марджин-лефт и сдвигает слой больше чем надо. Как с этим бороться подскажите плиз

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv=Content-Type content="text/html;charset=windows-1251">

<title>Untitled</title>

<style>

* {
margin: 0px;
padding: 0px;
}

#osnova{

width:100%; height: 100%; min-width:1000px;
}

#bodier{

height: 100%; background:#CFCFCF; position: relative;  z-index:0;
}

#left_body{

width: 100%;  height:600px;  z-index:0; position: relative; 
}

#podlogo{

background-color:#F6E90C;  float: left;  width:174px; margin-top:51px;margin-left:20px;
}

#top{

 background:#E34C4C ; float: left;   width:30%; height:24px; margin-top:51px;  position:relative; z-index:1;
}

#ugolr{
 background: #63B30C;  float: left; width:20px; height:24px; margin-top:51px; position:relative; z-index:1;

}

#left{

background:#E34C4C ; float: left; width:19px; height:30%; margin-left:175px; zoom:0;  position:static;  z-index:1;
}

#right{

background:#E34C4C; float: left; width:20px; height:30%; position:relative; z-index:1;
}

#ugol_br{

 background: #63B30C; float: left; width:20px; height:25px; position:relative; z-index:1;
}

#ugol_bl{

background:#63B30C; float: left; width:19px; height:25px; margin-left:175px; position:relative; z-index:1;
}

#bottom{

background: #E34C4C; float: left; width:30%; height:25px;  position:relative; z-index:1;
}

#kontent{

background: #c0c0c0; position: relative;  width:30%; height:30%; float: left; z-index:0;  
}


</style>

</head>

<body>

   <div id="osnova">


	  <div id="bodier">
		 <div id="left_body">

			<div id="podlogo"> </div>

			<div style="width:175px; position:absolute; top:100px; left:0px; background-color:red; ">175px </div>
			<div style="width:20px; position:absolute; top:51px; left:0px; background-color:red; ">20 </div>
			<div id="top"> </div>
			<div id="ugolr"> </div>
			<div style="clear: both"></div>

			<div id="left"> </div>
			<div id="kontent"> </div>

			<div id="right"> </div>
			<div style="clear: both"></div>


			<div id="ugol_bl"> </div>

			<div id="bottom"> </div>
			<div id="ugol_br"> </div>

		 </div>


	  </div>

   </div>

</body>

</html>

Да и еще плиз. Почему Фаерфокс не отображает фон в #podlogo и при большом разрешении по вертикали в низу браузера появляется пустое место

Yulia · December 28, 2008

в ИЕ6 если есть float и margin в одну и ту же сторону, margin удваивается. Увы, единственное решение - отдельное правило для ИЕ6

Добрый · December 28, 2008

для ie6 специально пропиши display: inline;

Rootical · January 9, 2009

От себя добавлю, что если приписать display: inline; для всего "шестого ие", то не помогает. Надо прописывать непосредственно для определенного блока или определенных элементов.

Вот такой хак: *html {display: inline;} - будет ещё и для ие 5.5.

Спасибо Доброму за решение, потому что отдельно писать в хаках маргины для каждого элемента мегко говоря не удобно).

rokkkky · January 30, 2009

display:inline помогает, но только если у блока фон не картинка, а мне нужно вблок #left вставить background: url(rama.png); background-repeat:repeat-y ; и при display:inline этот блок прибивает к левому краю , а margin-left остается справа. У 6-го Осла ведать еще проблемы с фоном в плавающих блоках. Как побороть кто знает?

Sign In

margin-left в IE6 удваивается

Question

rokkkky

Link to comment

Share on other sites

4 answers to this question

Recommended Posts

Yulia

Link to comment

Share on other sites

Добрый

Link to comment

Share on other sites

Rootical

Link to comment

Share on other sites

rokkkky

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information