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

[Raiden-=DM=-]

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

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

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

[mishka]

кто успел скопировать мой предыдущий код до последней правки - скопируйте еще раз, там была ошибка в експрешене.

главное разберись что такое в первом примере (height:expression(this.parentNode.offsetHeight-100+'px'); ) -100

и во втором ( height:expression(this.parentNode.offsetHeight-this.parentNode.offsetHeight/100*20+'px'); ) 20

Это сумма отступов

[psywalker]

кто успел скопировать мой предыдущий код до последней правки - скопируйте еще раз, там была ошибка в експрешене.

главное разберись что такое в первом примере (height:expression(this.parentNode.offsetHeight-100+'px'); ) -100

и во втором ( height:expression(this.parentNode.offsetHeight-this.parentNode.offsetHeight/100*20+'px'); ) 20

Это сумма отступов

ага, понял Мишка, спасибо тебе, пойду учиться

[mishka]

ага, понял Мишка, спасибо тебе, пойду учиться

Мы же с тобой это уже проходили

[Searcher]

так топикстартер хотел резину и в высоту тоже... я указал overflow:hidden чтобы ИЕ не растягивал в высоту при переполнении блока. можно указать и auto. я просто представлял себе область сайта с отступами по всем краям и содержимым в центре, и содержимое будет прокручиваться в центре, а макет весь не будет растягиваться...

если надо как Мишка сделал, то я тогда не понял зачем высоту на все 100 делать...

[mishka]

Searcher

Значит я неразобрался.

В твоих знаниях умениях ничуть несомневаюсь.

Edited November 17, 2009 by mishka2

[mishka]

так тогда человеку наверное не позиционирование нужно, а растягивание на 100% высоты окна браузера.

иль накрайняк експрешн поменять можна, чтобы от боди считал.

[Raiden-=DM=-]

Народ, огромнейшее всем спасибо!

Завтро с утра буду разбираться, а то дома 6го эксплорера нет...

mishka2, мне как раз резина и нужна была. Просто чердак и повал фиксированного размера, а окошко контента между ними нужно было резиновое запихнуть. Если всё писать в процентах - у меня не получилось (что, однако не значит, что у человека с нормальными прямыми руками, не как у меня , тоже не вышло бы). Поэтому решил перейти в абсы. Но 6й эксплорер не поддержал меня в этом начинании

В общем, еще раз всем огромное спасибище!

[mishka]

может это поможет?

http://forum.htmlbook.ru/index.php?s=&...st&p=123368

Ну посмотришь как работает, и под свои нужды сделаешь.

Edited November 17, 2009 by mishka2

[Raiden-=DM=-]

mishka2 хм.... Так "на глаз" я код пока читать еще не умею. Завтра гляну. Я эту тему, кстати, просматривал, только так далеко не забредал. Пасибо!

[WalkMan]

Я 6 ие лечил скриптом

<!--[if lt IE 7]>

<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script>

<![endif]-->

[psywalker]

Я 6 ие лечил скриптом

<!--[if lt IE 7]>

<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script>

<![endif]-->

я тоже им пользовался, но он содержит неприятные темы, из-за которых ИЕ6 виснет или не правильно ресайзится, пришлось отказаться

[WalkMan]

я тоже им пользовался, но он содержит неприятные темы, из-за которых ИЕ6 виснет или не правильно ресайзится, пришлось отказаться

Пока не заметил

хотя и раза два три им пользовался))

експрешены тож хорошо нагружают ослика

оффтоп: день когда вымрут последние ослы 6 можно будет сделать днём верстальщиков

[psywalker]

Пока не заметил

хотя и раза два три им пользовался))

експрешены тож хорошо нагружают ослика

оффтоп: день когда вымрут последние ослы 6 можно будет сделать днём верстальщиков

А я лично уже не раз это замечал, а гдето 50, может больше, не смог побороть и пришлось отказаться

[SelenIT]

this.parentNode.offsetHeight-this.parentNode.offsetHeight/100*20

Только я бы this.parentNode.offsetHeight за скобки вынес, а в рабочем проекте и вовсе упростил бы весь экспрешн до this.parentNode.offsetHeight*.8+'px'

[psywalker]

Только я бы this.parentNode.offsetHeight за скобки вынес, а в рабочем проекте и вовсе упростил бы весь экспрешн до this.parentNode.offsetHeight*.8+'px'

Скажи монстр, а что значит этот экспрешн, прям по полочкам если можно

[SelenIT]

Взять фактическую внешнюю высоту родительского элемента, умножить на 0.8 (т.е. на ту часть, что должна остаться от высоты этого род. эл-та за вычетом двух 10%-ных оступов, ноль перед точкой в JS можно не писать) и дописать к этому строку 'px' (при этом всё значение — дробное, в общем случае, число — неявно приведется к строке). Получится легитимное значение CSS-свойства height, которое и применится к эл-ту.

По идее, оно будет пересчитываться и переприсваиваться при любом событии, ведущем к перерисовке (reflow) окна — ресайзе, изменении размера шрифта, изменении innerHTML и т.п... но тут я уже не уверен, IE неистощим на сюрпризы

Кстати, возможно, в данном случае лучше цепляться к внутренней доступной высоте (clientHeight) предка, т.к. offsetHeight, насколько я в курсе, включает в себя толщину border-ов.

[mishka]

SelenIT, такую запись не все понять смогут. Ну а если сам делаешь то согласен, так лучше написать.

psywalker, разве тебе эта запись (this.parentNode.offsetHeight-this.parentNode.offsetHeight/100*20+'px') не напоминает:

a-a*b+'px'

где a = this.parentNode.offsetHeight

b = 20/100

итого:

a*(1-2/10)+'px' = a*(10/10-2/10)+'px' = a*(8/10)+'px' = a*0.8+'px'

Edited November 18, 2009 by mishka2

[psywalker]

Ребят, спасибо Вам огромное.

Мих, я запутался в твоей записи))) для меня это жесть)

[mishka]

Дык это же школа 8 кажется класс.

[psywalker]

Дык это же школа 8 кажется класс.

да это вам так всем кажется, что это 8 класс, ты мне дай обычные примеры восьмого класса, я тебе решу, а когда вы всё на JS переводите, я не могу понять саму суть

В каждом примере выходит a*0.8+'px',(как я понял по словам SelenIT,, точку можно не ставить ) но это мне особо ничего не даёт, вот в том то и проблема

Edited November 18, 2009 by psywalker

[psywalker]

Так значит parentNode это свойство, которое содержит узел на своего родителя, тоесть если я не ошибаюсь, он указывает на родителя, значит в данном случае на элемент с классом .wrap. Далее offsetHeight - это свойство возвращает высоту нашего элемента в пределах контейнера

Далее this - это походу указания на сам элемент, тоесть на самого себя

Выходит мы имеем следующее:

(this.parentNode.offsetHeight-this.parentNode.offsetHeight/100*20+'px')

Обращаемся к родительскому элементу, высчитываем его высоту и возвращаем нам.. а вот это что??? /100*20+'px' - получается мы сначала делим что-то на 100, а потом умножаем на 20, и в добавок приписываем пиксели?

Edited November 19, 2009 by psywalker

[Raiden-=DM=-]

Блин.... Если уж psywalker запутался, то о себе ваще молчу Единственное, что я понял, так это то, что экспрешшн делает симметричные отступы. А если нужно сделать НЕСИММЕТРИЧНЫЕ? Честно говоря, в исходнике мне так и нужно было, я просто упростил пример, уж простите идиота, не думал, что это критично.

[mishka]

Да он неделает отступы вообще(в данном примере).

Ты указываешь (для ие6) левый и верхний отступ. А експрешеном регулируешь высоту и ширину.

psywalker, как ты будешь считать 80% высоты/ширины от блока? Так как по 10% с каждой стороны мы убрали, то нам 80% надо.

this.parentNode.offsetHeight*0.8

ну и дописываем + 'px' так как this.parentNode.offsetHeight тоже высчитывается в пикселях.

либо

this.parentNode.offsetHeight - this.parentNode.offsetHeight /100*20

это чтото типа

100%-(100%/100)*20 = 100%-20% = 80%

не так ли?

Edited November 19, 2009 by mishka2

[mishka]

Raiden-=DM=-,

смотри, если бы ты сделал так:

div{
	position: absolute;
	top: 10%; 
	bottom: 35%;
	left: 20%;
	right: 47%;
	background: red;
}

То это будет работать везде кроме ие6. Так как он непонимает одновременно top-bottom left-right.

Он поймет top и left. Осталось ширину указать и высоту для ие6.

Ширина должна быть 100-20-47=33%(от родителя), получаем

width: expression(this.parentNode.offsetWidth*0.33+'px');

Высота должна быть 100-10-35=55(от родителя), имеем

height: expression(this.parentNode.offsetHeight*0.55+'px');

Edited November 19, 2009 by mishka2

[Searcher]

psywalker, вижу у тебя к JS сложилось какое-то отношение с предрассудками Ты уже изначально к нему относишься как к чему-то выше твоего понимания. Видимо это просто из-за того, что ты никогда не сталкивался с языками программирования.

Все эти языки построены на обыкновенной логике и математике. А математика - она и в Африке - математика Вся сложность только в словаре и синтаксисе. Если ты видишь операции сложения, умножения и т.п., то не теряйся - это обычная математика. Чтобы получить 80% от какого-то числа что мы делаем? Умножаем это число на 0.8 Вот и вся задача.

А прибавление к этому числу строки "px" что делает? Мы это недавно обсуждали...