Jump to content
  • 0

Баг 3-x колонок в 6IE


AntonSolo
 Share

Question

Есть простой код макета в три колонки

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

<html>
<head>
<style type="text/css">
html, body {
margin:0;
padding:0;
min-width:1000px;
}

div#navigation {
background:#B9CAFF;
}

div#extra {
background:#FF8539;
}

div#wrapper {
float:left;
width:100%;
}

div#content {
margin:0 200px 0 200px;
}

div#navigation {
float:left;
margin-left:-200px;
width:200px;
}

div#extra {
float:left;
margin-left:-100%;
width:200px;
}





</style>
</head>
<body>

<div id="wrapper">
<div id="content">
<p>
</p>
<p>very make make fill silly long long filler column long make silly silly column filler fill fill very filler text fill filler column make fill make text very make make very fill fill long make very filler column very long very filler silly very make filler silly make make column column </p>
<p>fill long make long text very make long fill column make text very silly column filler silly text fill text filler filler filler make make make make text filler fill column filler make silly make text text fill make very filler column very </p>
<p>column text long column make silly long text filler silly very very very long filler fill very fill silly very make make filler text filler text make silly text text long fill fill make text fill long text very silly long long filler filler fill silly long make column make silly long column long make very </p>
<a href="#">Add Text to this section</a>
</div>
</div>
<div id="navigation">
<a href="#">Add Text to this section</a>
</div>
<div id="extra">Левая колонка Левая колонка Левая колонка
</div>
</body>
</html>

Есть ли решение проблемы бага, при уменьшении окна броузера чтобы левая колонка не уезжала непонятно куда ?

Link to comment
Share on other sites

10 answers to this question

Recommended Posts

  • 0
<!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=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
*{ margin: 0; padding: 0;}
body { min-width: 700px;}
#left_bg { float: left; width: 300px; background: red;}
#right_bg { float: right; width: 300px; background: red;}
#content {
overflow: hidden;
background: blue;
zoom:1;
}
</style>
</head>

<body>

<div id="left_bg">Left</div>
<div id="right_bg">Right</div>
<div id="content">Тут какой-то контент</div>

</body>
</html>

Link to comment
Share on other sites

  • 0
<!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=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
*{ margin: 0; padding: 0;}
body { min-width: 700px;}
#left_bg { float: left; width: 300px; background: red;}
#right_bg { float: right; width: 300px; background: red;}
#content {
overflow: hidden;
background: blue;
zoom:1;
}
</style>
</head>


<body>

<div id="left_bg">Left</div>
<div id="right_bg">Right</div>
<div id="content">Тут какой-то контент</div>

</body>
</html>

Это в 6 ещё хуже чем то что я писал работает. Непонятный подход к решению. Колонки опять же съезжают :(

Edited by AntonSolo
Link to comment
Share on other sites

  • 0

AntonSolo, непонятный подход к решению у вас, а у psywalker как раз очень грамотный подход.

Посмотрите внимательно как это делается:

http://csstemplater.com/

http://layouts.ironmyers.com/

http://www.dynamicdrive.com/style/layouts/category/C10/

http://www.code-sucks.com/css%20layouts/faux-css-layouts/

http://tjkdesign.com/articles/one_html_mar...css_layouts.asp

http://blog.html.it/layoutgala/

Видимо AntonSolo проблему неверно описал, в ие6 не работает min-width, отсюда остальные косяки.

ничего не поменялось, то же самое

все должно работать, куда вы вписали width:expression(document.documentElement.clientWidth < 700 ? "700px" : "auto");?

Link to comment
Share on other sites

  • 0
Я не верю, смотрим, проверяем http://psywalker.ru/Forum/Column/maing.html

Спасибо, что -то значит я не так делаю, у вас действительно работает

AntonSolo, непонятный подход к решению у вас, а у psywalker как раз очень грамотный подход.

Посмотрите внимательно как это делается:

http://csstemplater.com/

http://layouts.ironmyers.com/

http://www.dynamicdrive.com/style/layouts/category/C10/

http://www.code-sucks.com/css%20layouts/faux-css-layouts/

http://tjkdesign.com/articles/one_html_mar...css_layouts.asp

http://blog.html.it/layoutgala/

Видимо AntonSolo проблему неверно описал, в ие6 не работает min-width, отсюда остальные косяки.

все должно работать, куда вы вписали width:expression(document.documentElement.clientWidth < 700 ? "700px" : "auto");?

Спасибо большинство ссылок находил, некоторые сейчас буду изучать. Спасибо

Link to comment
Share on other sites

  • 0
Спасибо, что -то значит я не так делаю, у вас действительно работает

Спасибо большинство ссылок находил, некоторые сейчас буду изучать. Спасибо

Не правильно делаешь однозначно, что-то у тя в коде не то!

Link to comment
Share on other sites

  • 0
А можно как -то убрать отступы в 6IE у средней колонки которая синим цветом, там между красным и синим белый фон ?

<!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=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
*{ margin: 0; padding: 0;}
body { min-width: 700px;}
*html body {
width:expression(document.documentElement.clientWidth < 700 ? "700px" : "auto");

}
#left_bg {
float: left;
width: 300px;
background: red;
_margin-right: -3px;
}
#right_bg {
float: right;
width: 300px;
background: red;
_margin-left: -3px;
}
#content {
overflow: hidden;
background: blue;
zoom:1;
}
</style>
</head>


<body>

<div id="left_bg">Left</div>
<div id="right_bg">Right</div>
<div id="content">Тут какой-то контент</div>

</body>
</html>

_margin-right: -3px; - для ИЕ6

_margin-left: -3px; - для ИЕ6

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