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

AntonSolo · October 27, 2009

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

<!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>

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

psywalker · October 27, 2009

<!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>

AntonSolo · October 27, 2009

<!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 October 27, 2009 by AntonSolo

psywalker · October 27, 2009

А если так поставить?

*html body {

width:expression(document.documentElement.clientWidth < 700 ? "700px" : "auto");

}

AntonSolo · October 27, 2009

А если так поставить?
*html body {
width:expression(document.documentElement.clientWidth < 700 ? "700px" : "auto");
}

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

Searcher · October 27, 2009

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");?

psywalker · October 27, 2009

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

AntonSolo · October 27, 2009

Я не верю, смотрим, проверяем 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");?

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

psywalker · October 27, 2009

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

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

AntonSolo · October 27, 2009

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

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

psywalker · October 27, 2009

А можно как -то убрать отступы в 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

Sign In

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

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

Join the conversation

Обсуждения

Important Information