Jump to content
  • 0

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


ChipAlina
 Share

Question

Всем привет.

Приводимый код работает корректно везде кроме 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%;}

Спасибо.

Link to comment
Share on other sites

6 answers to this question

Recommended Posts

  • 0

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

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

Link to comment
Share on other sites

  • 0

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

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

Link to comment
Share on other sites

  • 0

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

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;
}

Link to comment
Share on other sites

  • 0

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

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

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;}

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy