центрирование не работает в IE6

ChipAlina · December 21, 2010

Всем привет.

Приводимый код работает корректно везде кроме IE6. Что не так?

Описание: в IE6 правый блок, при сжатии окна браузера, перемещается вниз. При широком окне между блоками белая полоса. Как это исправить?

html Код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<!--META-->
<meta http-equiv = "Content-Language" content = "ru" />
<meta http-equiv = "Content-type" content = "text/html; charset = UTF-8" />
<meta name = "description" content = "Описание в Google..." />
<meta name = "keywords" content = "Ключевые слова..." />
<!--LINKS-->
<link rel = "stylesheet" type = "text/css" href = "/styles/block.css" />
<link rel = "stylesheet" type = "text/css" href = "/styles/text.css" />
</head>

<body>
<div id = "main" >
<!--HEADER-->
	<div id = "header" >
		<div class = "header_left"></div>
		<div class = "header_right"></div>
	</div>
<!--HEADER-->
</div>
</body>

</html>

CSS код:

body {margin: 0px; padding: 0px;}
#main {margin: 0px; padding: 0px; min-width: 1024px; width:expression(document.body.clientWidth > 1024? "auto": "1024px" ); overflow: hidden;}
#header {height: 164px; position: relative; left: 50%; float: left; min-width: 1024px; width:expression(document.body.clientWidth > 1024? "auto": "1024px" );}
	.header_left {margin: 0px; height: 164px; width: 234px; background:url("/images/header_left.jpg"); background-repeat: no-repeat; float: left;position: relative; right: 50%;}
	.header_right {margin-left: 234px; height: 164px; width: 790px; background: url("/images/header_right.jpg"); background-repeat: no-repeat; position: relative; right: 50%;}

Спасибо.

undina · December 21, 2010

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

Навскидку могу сказать, ИЕ не любит, когда плавающие блоки вписываются в родительский блок точно до пикселя (должно быть расстояние хотя бы в 1рх). У вас родительский блок 1024=790+234. Сделайте хотя бы 789 и 233.

ChipAlina · December 22, 2010

В том то и дело, что если рамку ставить, пробела нет между блоками, а если ее убрать , то в IE6 появляется белая полоса. Это первая проблема. А вторая заключается в том, что при сжатии окна браузера правый блок начинает прыгать - смещаться вниз.

Ссылка на сайт http://alina-potashnikova.narod.ru/

arez · December 22, 2010

Поэкспериментируйте

html

<div class="container">
  <div class="grid_1">
	Grid 1
  </div>
  <div class="grid_2">
	Grid 2
  </div>
  <div class="clear"></div>  
</div>

css

.container {
  margin: 0 auto;
  width: 150px;
}
.container .grid_1,
.container .grid_2 {
  display: inline;
  float: left;
  position: relative;
}
.container .grid_1 {
  width: 50px
  background: none repeat scroll 0 0 #999
}
.container .grid_2 {
  width: 100px
  background: none repeat scroll 0 0 #EEE
}
.clear {
  clear: both;
  display: block;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  width: 0;
}

undina · December 22, 2010

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

Вы пробовали уменьшать на несколько px размеры блоков?

ChipAlina · December 22, 2010

Да, пробовала - не работает.

Поэкспериментируйте

Эксперименты пока тоже не удаются.

ChipAlina · December 22, 2010

Нашла ответ на свой вопрос.

Правильный код:

HTML:

<body>
<div id = "main" align = "center">
<!--HEADER-->
	<div id = "header" align = "center">
		<div class = "header_left"></div>
		<div class = "header_right"></div>
		<div class="clear"></div>
	</div>
<!--HEADER-->
</div>
</body>

CSS:

* {padding: 0px; margin: 0px;}
html,body { height:100%; width:100%;}
#main { min-width:1024px; width:expression(document.body.clientWidth > 1024? "auto": "1024px" );}
#header { width:1024px; margin:0 auto;}
	.header_left,.header_right {height:164px; float:left; background-repeat: no-repeat;}
	.header_left {width:233px; background: url("/images/header_left.jpg");}
	.header_right{width:789px; background: url("/images/header_right.jpg");}
	.clear{clear:both;}

Спасибо за ответы!

Sign In

центрирование не работает в IE6

Question

ChipAlina

Link to comment

Share on other sites

6 answers to this question

Recommended Posts

undina

Link to comment

Share on other sites

ChipAlina

Link to comment

Share on other sites

arez

Link to comment

Share on other sites

undina

Link to comment

Share on other sites

ChipAlina

Link to comment

Share on other sites

ChipAlina

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information