Абсолютное позиционирование и IE6

Raiden-=DM=- · November 17, 2009

Вопрос в следующем. Если в ЦСС задать примерно такое:

position:absolute;
	top:10px;
	bottom:10px;
	left:10px;
	right:10px;

, то 7й эксплорер и мозила "растянут" див таким образом, что он будет "не доставать" до края экрана по 10 пикселов с каждой стороны. 6й эксплорер не видит одновременно параметров left и right для одного элемента - читает только первый. Его можно от этого вылечить?

Justnewone · November 17, 2009

Вопрос в следующем. Если в ЦСС задать примерно такое:
position:absolute;
	top:10px;
	bottom:10px;
	left:10px;
	right:10px;
, то 7й эксплорер и мозила "растянут" див таким образом, что он будет "не доставать" до края экрана по 10 пикселов с каждой стороны. 6й эксплорер не видит одновременно параметров left и right для одного элемента - читает только первый. Его можно от этого вылечить?

нет

Raiden-=DM=- · November 17, 2009

нет

Мда уж.... :rolleyes:

Спасибо за ответ! Как говориться, негативный результат - тоже результат.

Searcher · November 17, 2009

вылечить можно, но только при помощи JS или expression

Raiden-=DM=- · November 17, 2009

вылечить можно, но только при помощи JS или expression

Тоесть при помощи условных комментариев?

Игорь Ермаков · November 17, 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>Тест</title>
<style type="text/css">
#contaner{position:absolute;
left:100px; top:100px;
bottom:100px; right:100px;
background:#424242;
// width:expression(document.body.offsetWidth-200);
height:300px;}
</style>
</head>
<body>
<div id="contaner">
</div>
</body>
</html>

А что вот высоту не смог. :/

Чем руководствовался: http://softwaremaniacs.org/blog/2005/08/03...ut-positioning/

Searcher · November 17, 2009

Единицы измерения надо указывать... Ну и в высоту также можно, можно еще заменить точку отсчета высоты и ширины на родительский объект:

height: expression(parentNode.offsetHeight - 200 + 'px');
width: expression(parentNode.offsetWidth - 200 + 'px');

Игорь Ермаков · November 17, 2009

С шириной по прежнему работает, с высотой нет.

Searcher · November 17, 2009

должно работать... попробуйте от body

возможно еще доктайп влияет... попробуйте поменять на нестрогий или на html

задайте еще для body высоту в 100%

psywalker · November 17, 2009

Raiden-=DM=-

Братский подгон с двумя вариантами и примерами:

<!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></title>
	<style type="text/css">
		*{ padding: 0; margin: 0;}

		/* Нужно что-бы блок <div class="content"></div>:
			1. Высоты 100% минус 50px со всех сторон 
			2. absolute и растягивался в зависимости от своего родителя div.wrap 
			3. Вобщем точно так же, как и в Файрфоксе, так же должно быть и в ИЕ6
		*/

		div.wrap {
				position: relative;
				width: 500px;
				height: 500px;
				margin: 20px auto;
				border: 1px solid #000;
		}
			div.content {
					position: absolute;
					top: 50px; 
					bottom: 50px;
					left: 50px;
					right: 50px;
					background: red;
					/*_height: expression(this.parentNode.offsetHeight-50-50+'px');*/
					/*_width: expression(this.parentNode.offsetWidth-50-50+'px');*/
_height: expression(this.parentNode.offsetHeight-100+'px');
_width: expression(this.parentNode.offsetWidth-100+'px');
			}

	</style>
</head>

<body>

		<div class="wrap">

			<div class="content"></div>

						  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem 
  nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p>

  <p>Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper 
  suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem 
  nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p>
  <p>Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper 
  suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem 
  nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p>
  <p>Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper 
  suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem 
  nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p>

  <p>Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper 
  suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>


		</div>


</body>
</html>

Игорь Ермаков · November 17, 2009

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

psywalker · November 17, 2009

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

Я сам не разбираюсь

Raiden-=DM=- · November 17, 2009

Я сам не разбираюсь

psywalker, пасибо персональное в очередной раз И всем спасибо

А то 6й эксплорер уже в печенках сидит.... Да заодно мой маниакальный синдром, сделать таки "полную резину"....

кстати, по ширине, еще куда ни шло, можно через авто отступы сделать. А вот высота да - это вопрос

Кстати, братский вариант не работает таки по высоте на 6м эксплорере

Edited November 17, 2009 by Raiden-=DM=-

Игорь Ермаков · November 17, 2009

Я сам не разбираюсь

Searcher, может ты чего подкинешь?

А то 6й эксплорер уже в печенках сидит

Да ладно тебе, классный браузер, чтобы мы без него делали.

Edited November 17, 2009 by Игорь Ермаков

psywalker · November 17, 2009

Ну что б я без тебя делал то? Пасибо всем!
А то 6й эксплорер уже в печенках сидит.... Да заодно мой маниакальный синдром, сделать таки "полную резину"....
кстати, по ширине, еще куда ни шло, можно через авто отступы сделать. А вот высота да - это вопрос

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

Searcher · November 17, 2009

Да ладно тебе, классный браузер, чтобы мы без него делали.

expression - это просто Java Script

не, psywalker, ты не накосячил, просто надо указывать высоту у всех родителей, а если относительная высота то вплоть до body

Justnewone · November 17, 2009

expression - это просто Java Script
не, psywalker, ты не накосячил, просто надо указывать высоту у всех родителей, а если относительная высота то вплоть до body

psywalker, ай-яй-яй )))

Searcher · November 17, 2009

да нет, psywalker установил ширину и высоту родителя в 500px, так что у него все нормально работает, но если устанавливать относительные размеры, как скорее всего делает Игорь, то эти размеры должны быть прописаны до самого body и html. Вобщем так:

<!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></title>
	<style type="text/css">
		*{ padding: 0; margin: 0;}

		/* Нужно что-бы блок <div class="content"></div>:
			1. Высоты 100% минус 50px со всех сторон а блок wrap я разместил по
			   центру и добавил отступы по 10%, но если на всё окно, то можно и
			   без wrap обойтись. Главное, чтобы все высоты родителей были прописаны.
			2. absolute и растягивался в зависимости от своего родителя div.wrap
			3. Вобщем точно так же, как и в Файрфоксе, так же должно быть и в ИЕ6
		*/
		html, body {
		width: 100%;
		height: 100%;
	}
		div.wrap {
				position: relative;
				overflow: hidden;
				width: 80%;
				height: 80%;
		top: 10%;
		left: 10%;
				border: 1px solid #000;
		}
			div.content {
					position: absolute;
					overflow: hidden;
					top: 50px;
					bottom: 50px;
					left: 50px;
					right: 50px;
					background: red;
					/*_height: expression(this.parentNode.offsetHeight-50-50+'px');*/
					/*_width: expression(this.parentNode.offsetWidth-50-50+'px');*/
_height: expression(this.parentNode.offsetHeight-100+'px');
_width: expression(this.parentNode.offsetWidth-100+'px');
			}

	</style>
</head>

<body>

		<div class="wrap">

			<div class="content"></div>

						  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
  nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p>

  <p>Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper
  suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
  nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p>
  <p>Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper
  suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
  nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p>
  <p>Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper
  suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
  nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p>

  <p>Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper
  suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>


		</div>


</body>
</html>

psywalker · November 17, 2009

Searcher

погоди, но есть запара, если главный блок текстом заполнить, то всё обрежется нахер либо если оверфлуху убрать, то один хрен Красный блок не растягивается, в чём подвох?

Raiden-=DM=- · November 17, 2009

Searcher
погоди, но есть запара, если главный блок текстом заполнить, то всё обрежется нахер либо если оверфлуху убрать, то один хрен Красный блок не растягивается, в чём подвох?

чёрт.... Чувствую себя уже Геростратом, которых храм поджог, ибо сам уже запутался прочно и основательно , а тут просто холивар на эту тему

psywalker я взял твой код, скопипастил его "тютелька в тютельку", и в результате под 6м эксплорером красный квадрат благополучно вывалился за пределы родителя (у меня, по крайней мере). А, кстати, ежели текст поместить в красный квадрат, то он ваще вылазит за пределы квадрата. Тут, конечно, оверфлоу поможет.

mishka · November 17, 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=windows-1251" />
<title></title>
	<style type="text/css">
		body{
			margin:0;
		}
		.wrap{
			position:relative;
			overflow:hidden;
			width:80%;
			top:10%;
			left:10%;
			border:1px solid #000;
		}
		.content{
			position:absolute;
			overflow:hidden;
			top:50px;
			bottom:50px;
			left:50px;
			right:50px;
			background:red;
			_height:expression(this.parentNode.offsetHeight-100+'px');
			_width:expression(this.parentNode.offsetWidth-100+'px');
		}
	</style>
</head>

<body>
	<div class="wrap">
		<div class="content">
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p>
			<p>Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p>
	<p>Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p>
	<p>Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p>
			<p>Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
		</div>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p>
		<p>Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p>
<p>Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p>
<p>Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p>
		<p>Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
	</div>
</body>
</html>

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

Все работает!

Если в красный квадрат добавить текст, то он естественно обрежется во всех браузерах.

Експрешн прекрасно ловит и ширину и высоту родителя, и ненадо ниче от боди прописывать.

Edited November 17, 2009 by mishka2

psywalker · November 17, 2009

mishka2

Воо, ничтяк дружище, то что я хотел

mishka · November 17, 2009

Если хочешь top, left, right, bottom задавать в процентах - то експрешн надо немного переделать.

psywalker · November 17, 2009

Если хочешь top, left, right, bottom задавать в процентах - то експрешн надо немного переделать.

аа, понял Мих, тогда если чё, обращусь в аську

mishka · November 17, 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=windows-1251" />
<title></title>
	<style type="text/css">
		body{
			margin:0;
		}
		.wrap{
			position:relative;
			overflow:hidden;
			width:80%;
			top:10%;
			left:10%;
			border:1px solid #000;
		}
		.content{
			position:absolute;
			overflow:hidden;
			top:10%;
			bottom:10%;
			left:10%;
			right:10%;
			background:red;
			_height:expression(this.parentNode.offsetHeight-this.parentNode.offsetHeight/100*20+'px');
			_width:expression(this.parentNode.offsetWidth-this.parentNode.offsetWidth/100*20+'px');
		}
	</style>
</head>

<body>
	<div class="wrap">
		<div class="content">
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p>
			<p>Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p>
	<p>Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p>
	<p>Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p>
			<p>Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
		</div>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p>
		<p>Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p>
<p>Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p>
<p>Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p>
		<p>Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
	</div>
</body>
</html>

Edited November 17, 2009 by mishka2

psywalker · November 17, 2009

Воо маньяк выдаёт аа, ты поглядии на негоо

Sign In

Абсолютное позиционирование и IE6

Question

Link to comment

Share on other sites

Top Posters For This Question

Popular Days

Top Posters For This Question

Popular Days

52 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

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

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