Jump to content
  • 0

Position fixed для IE6


Nigelist
 Share

Question

Есть плавающий блок (position fixed) и во всех браузерах нормально отображается. А в IE6 position fixed оказывается не пашет. Искал в гугле, но там описаны способы закрепляющие блок в топе. А мне необходимо закрепить этот слой в боттом.

Подскажите как это сделать? Вот CSS того самого блока:

width:200px; background:#F8F8F8; padding:2px; border:1px #CDCDCD solid; position:fixed; right:4px; bottom:2px; z-index:81

Link to comment
Share on other sites

Recommended Posts

  • 0

Как раз читал баш, цитата: "А кто-нибудь еще использует ИЕ6? -Да, разработчики, которые считают, что кто-то еще использует ИЕ6" :)

Сразу записал с вашими параметрами.

   1.  * {
2. margin: 0;
3. }
4. html, body {
5. height: 100%;
6. overflow: auto;
7. }
8. .wrapper {
9. position: relative;
10. width: 100%;
11. height: 100%;
12. overflow: auto;
13. }
14. .box {
width:200px;
background:#F8F8F8;
15. position: fixed;
16. left: 10px;
17. top: 180px;
padding:2px;
border:1px #CDCDCD solid;
right:4px;
bottom:2px;
z-index:81
18. }
19. * html .box {
20. position: absolute;
21. }

<html>
<head>
<link rel="stylesheet" href="layout.css" ... />
</head>
<body>
<div class="wrapper">
<p>Весь контент здесь.</p>
</div>
<div class="box">
<p>А этот блок фиксированный.</p>
</div>
</body>
</html>

Найдено на первых строчках яндекса. Кстати, а чем вам expression не угодил? И кто сказал, что с его помощью блок крепится к топу? expression - метод для ИЕ, чтобы в цсс можно было вставлять куски js-кода для поддержки несуществующих в ИЕ функций. Там как бы координаты задаете и в путь. Но этот метод тоже рабочий.

Edited by YaD
Link to comment
Share on other sites

  • 0
Как раз читал баш, цитата: "А кто-нибудь еще использует ИЕ6? -Да, разработчики, которые считают, что кто-то еще использует ИЕ6" :)

Найдено на первых строчках яндекса. Кстати, а чем вам expression не угодил? И кто сказал, что с его помощью блок крепится к топу? expression - метод для ИЕ, чтобы в цсс можно было вставлять куски js-кода для поддержки несуществующих в ИЕ функций. Там как бы координаты задаете и в путь. Но этот метод тоже рабочий.

Та не не скажите. Осла многие используют. Попросил пяток знакомых прислать скрины своей страницы. Вот и обнаружились косячки. А по поводу вашего метода, читал как то заметки к такому методу :) :

Жесть (:

В футураме было такое дело:

- Профессор, как летает этот звездолёт?

- Он не летает, он стоит на месте и двигает всю вселенную вокруг себя.

А по поводу expression, ничего против не имею. Просто я еще валенок в JS, потому и не смог приспособить готовые рецепты под себя. Не напишите мне вариант с expression? :)
Link to comment
Share on other sites

  • 0

Например:

#fixed-block {
position: fixed;
right: 2em;
top: 100px;
background: wheat;
padding: 1.5em 1.5em 1.5em 3em;
width: 15em;
}

* html #fixed-block {
position: absolute;
top: expression(eval(document.documentElement.scrollTop) + 100 + 'px');
}

вместо 100 проставьте кол-во пикселей, которые являются отступом от верхнего края страницы.

Проверьте, а то я тож пока валенкоподобен в js=)

Edited by YaD
Link to comment
Share on other sites

  • 0

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

Great Rash, разве ваш вариант не тоже самое, что и это?

Link to comment
Share on other sites

  • 0

Имхо, вариант с экспрешном (плюс html {background:url(about:blank) fixed}, чтобы избавиться от дрожания, в развитие первого "лебедевского" способа) всё-таки правильнее. Лучше поставить костыль для одного доживающего последние дни инвалида, чем из-за него усложнять жизнь всем, заставляя body вести себя неестественно, а div — корчить из себя body, и усложняя мелкие правки страницы (напр., смену позишн:фиксед на нефиксед и обратно у других существующих эл-тов страницы)...

Привязка к top-у на самом деле не существенна, в expression можно засунуть любую комбинацию scrollTop-а c offsetHeight-ом, например, которая даст нужный результат. Единственный нюанс — при нормальном доктайпе вместо document.body нужно использовать document.documentElement.

Link to comment
Share on other sites

  • 0

И в чем же неестественность поведения <body> в этом случае? Ну будет вместо <body> <div> и что изменится то? Заменили один контейнер другим, от перестановки слагаемых сумма не меняется. В чем сложность смены фиксед на нефиксед? Переместить "фиксед" в <div> вместо <body>?

Link to comment
Share on other sites

  • 0

Как минимум, в каком-то IE при ресайзе окна с таким способом скроллинг отставал от рамки — мелочь, а "как-то неаккуратненько". Но главное — необходимость выноса фиксируемых элементов за пределы wrapper-а, что не всегда возможно при необходимости внезапно зафиксировать какой-либо элемент динамически (случай редкий, не спорю — но чего только заказчики порой не требуют..:). Плюс небольшой, но и ненулевой риск непредсказуемости при подключении сторонних штуковин типа лайтбоксов-шмайтбоксов, плавного скроллинга к якорям и прочих украшательств (и это во всех браузерах, не только в одном ущербном). Оно того стоит?

Link to comment
Share on other sites

  • 0

Поддерживаю SelenITа, считаю, что нехера менять вещи, которые уже стоят на своих местах, да и потом правда, проблемы могут быть, мало-ли что.

Вот держите лучше решение и не парьтесь:

<!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; }
body{background:url('/n.gif') fixed no-repeat;}
/* Нужно что-бы картинка слева всегда была:
1. Высоты 100% -
2. Фиксированной и не растягивалась при заполнении текста
3. Вобщем точно так же, как и в Файрфоксе, так же должно быть и в ИЕ6
*/


div.fixed {
position: fixed;
left: 0;
top: 100px;

_top: expression(document.getElementsByTagName('html')[0].scrollTop+100+'px');
_height: expression(document.getElementsByTagName('html')[0].clientHeight-100-100+'px');
bottom: 100px;
width: 200px;
background: red;
_position: absolute;
}
div.right { margin-left: 250px;}
</style>
</head>

<body>
<div class="fixed">FIXED</div>

<div class="right">

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

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

Link to comment
Share on other sites

  • 0
Это не мой вариант. Я, признаться, не читал код, который привел YaD. Но в любом случае это наверное самый правильный вариант организации fixed в ИЕ6.

Не хотелось бы переделывать шаблон под этот метод. Мне в принципе хватило бы нормально написанного expression, даже несмотря на то что он кушает ресурсы. CSS-хаками бы сделал бы код активным только для IE6.

З.Ы. решил попробовать что получится из этого. Как я и подозревал. Без подгона шаблона ничего хорошего:

2403383.th.png

А переделывать весь шаблон, из-за одного мини-чата не хоцца.

Link to comment
Share on other sites

  • 0

psywalker, а не переделаете свой вариант для моего стиля. А то поставил ваш вариант и чат растянулся.

#chatBox {width:200px; background:#F8F8F8; padding:2px; border:1px #CDCDCD solid; position:fixed; right:4px; bottom:2px; z-index:81}

По умолчанию чат у меня свернут и разворачивается вверх.

Link to comment
Share on other sites

  • 0

psywalker, нужно получить эмуляцию position fixed для IE6, но блок должен быть закреплен:

right:4px; bottom:2px;

Именно в bottom, а не с отступом от top'a. И в не зависимости от размеров окна, разрешения экрана, оставаться на месте. Возможно ли это реализовать с помощью expression.

Edited by Nigelist
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>Gradient</title>
<style type="text/css">
*{ margin: 0; padding: 0;}
body{background:url('/n.gif') fixed no-repeat;}


div#banner {
position: fixed;
right: 124px;
top: 24px;
width: 400px;
height: 200px;
background: red;
display: none;

}

input { font: bold 15px Verdana, Geneva, sans-serif; color: #900; display: block; margin-bottom: 20px;}
</style>

<!--[if lte IE 6]>
<style type="text/css">

div#banner {
position: absolute;
top: expression(document.getElementsByTagName('html')[0].scrollTop+24+'px');

}


</style>
<![endif]-->

</head>

<body>
<input type="button" value="Нажать чтобы ОН появился :)" onclick="banner()" />
<div id="banner">BANNER<input type="button" value="Нажать чтобы ОН Исчез :)" onclick="banner_off()" /></div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p>

<script language="javascript">

function banner(){

var banner = document.getElementById('banner')
var input = document.getElementsByTagName('input').item(0)


if(banner.style.display == 'block'){
banner.style.display = 'none';

}
else{
banner.style.display = 'block';

}

}
function banner_off(){

var banner = document.getElementById('banner')
if(banner.style.display == 'block'){banner.style.display = 'none'}

}
</script>

</body>
</html>

Link to comment
Share on other sites

  • 0

psywalker, к сожалению работает некорректно, не позиционируется с помощью bottom. :) Тестирую с помощью IE Tester.

#chatBox {width:200px; background:#F8F8F8; padding:2px; border:1px #CDCDCD solid; position:fixed; right:4px; bottom:2px; z-index:81}
* html #chatBox {position: absolute; top:expression(document.getElementsByTagName('html')[0].scrollTop+24+'px'); right:4px; bottom:2px;}

Edited by Nigelist
Link to comment
Share on other sites

  • 0

Все методы хороши :)

Но, как только вы начинаете при использовании Position:Fixed менять размер окна браузера и играть горизонтальной прокруткой

начинаются проблемы, так как фиксированный блок или наезжает на другие блоки или под ними прячется, зависит от z-index.

Поэтому эмуляция position:fixed; для IE6 на основе position:absolute;, предпочтительнее и работает во всех браузерах за редким исключением.

Читаем: http://trifler.ru/blog/post_1237567131.html

Пример: http://trifler.ru/blog/i/layouts/fixed/ideal_fixed.htm

Link to comment
Share on other sites

  • 0

gordi

Но ты сам посуди дружище, в нашем способе используется родной Position:Fixed и работает он во-всех браузерах, кроме ИЕ6, для которого мы заготавливаем экспрешан. ИЕ6 уже составляет 5%, да и потом этот браузер - это единственный минус, из-за которого будет использоваться экспрешан. А твоя эмуляция может нанести вред в будущем http://forum.htmlbook.ru/index.php?s=&...st&p=163231

Подумай, стоит ли использовать твоё решение и бояться за будущее сайта или всё таки обойтись одним экспрешаном для ИЕ6 и не знать проблем?

Link to comment
Share on other sites

  • 0
gordi

Но ты сам посуди дружище, в нашем способе используется родной Position:Fixed и работает он во-всех браузерах, кроме ИЕ6, для которого мы заготавливаем экспрешан. ИЕ6 уже составляет 5%, да и потом этот браузер - это единственный минус, из-за которого будет использоваться экспрешан. А твоя эмуляция может нанести вред в будущем http://forum.htmlbook.ru/index.php?s=&...st&p=163231

Подумай, стоит ли использовать твоё решение и бояться за будущее сайта или всё таки обойтись одним экспрешаном для ИЕ6 и не знать проблем?

Но, как быть с горизонтальной прокруткой при уменьшении размеров окна браузера?

В этом, как раз самая главная проблема.

По идее, информация в зафиксированном блоке, всегда должна быть доступна, а что имеем в итоге с position:fixed;?

Тогда, есть ли смысл вообще его использовать?

Или поведение страницы, всех в этом случае устраивает :)

Edited by gordi
Link to comment
Share on other sites

  • 0

1) Смотри, выходит ты задал главному блоку Position:Fixed и при сужении окна прокрутка не появляется. Это ты имел ввиду?

2) А покажи тот же пример с абсолютом, ведь по идее полоса прокрутки тоже не появится, а разве я не прав?

Link to comment
Share on other sites

Guest
This topic is now closed to further replies.
 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