По долгу службы пришлось столкнуться со CSS–свойством “position: fixed”. Если использовать это свойство в контексте “background-position: fixed” – не возникает никаких вопросов вообще, все браузеры «едят» его наура. Проблема появляется, если располагать таким способом какой-либо блок
. В FireFox position: fixed работает, как положено, а вот Explorer ставит его в начало станицы и чудненько скролит вместе со всем контентом.
Нашла в инете несколько довольно хороших примеров. Как оказалось, ИЕ напрямую, как FF, это свойство не отрабатывает. Чтобы Explorer понял, что этот div скролить не надо, нужно явно указать для него несколько дополнительных параметров. Код выглядит примерно так.
HTML:
<html>
<body>
<div id=”fixedbox”>
… … … … …
</div>
<div id=”page”>
… … … … …
</div>
</body>
</html>
В моем случае fixedbox – блок, который должен позиционироваться по правому верхнему краю страницы и оставаться там не зависимо от скрола вниз всей страницы с контентом.
Соответственно, блок page – блок контента, внутри которого расположены все остальные дивы с footer-ом, header-ом, … в общем, их там всяких много.
В CSS для IE нужно добавить такой код:
html{
overflow: hidden;
}body{
height: 100%;
overflow: auto;
}div#fixedbox {
position: absolute;
top: 4px;
left: 830px;
width: 154px;
}html>body {
height: inherit;
overflow: visible;
}body>div#fixedbox {
position: fixed;
top: 3px;
left: 830px;
overflow: hidden;
}
После такого добавления скролиться fixedbox перестанет, как и было задумано. Правда, если внутри #page есть какие-то дивы, для которых указан position: absolute или relative – в IE они начинают вести себя так, как и fixedbox, то есть скрол на них тоже не действует.
Решить эту проблему у меня получилось только пересмотром всего CSS–а и заменой верстки position на float.
Правда, теперь есть другая проблема. При уменьшении окна в Explorer полоса прокрутки появляется по контуру блока page, и fixedbox оказывается, вроде как за пределами области страницы. Так вот, если у кого-то что-то подобное случалось – делитесь опытом J выслушиваю любые идеи в отношении решений.
Почему бы не использовать float’ы. Вот на рисунке как это может выглядеть:
tinypic.com
Делаешь #page с фиксированной шириной. В нём два блока #content и #shopcart. B флоатишь их налево и направо соотвественно. Вот так это будет выглядеть. Сурс внутри.
Можно еще подойти к твоей задачи с “position: relative”. Вообщем, вариантов хватает.
Кстати, Иван Сагалаев (ака Maniac) замечательно пишет про float’ы и другие вещи.
slaff прав! лучше юзать флоаты.
После того, как Microsoft объявила о том, что IE 7 будет устанавливатся путем автообновления системы, остается только ждать когда же наконец наступит день Х и проблема с position:fixed, min-width, транспарентными png и прочие канут в лету.
987987987987*/ 987 987 87987987 9879879lhhhhhhhhhhhhhhhhhhhhhhhhhljhlkjhlkjh98798798798888888888887777777777777777777777777777777779999999999888888888877777777777888888888888899999999997777777888888888999999999997777777777888888888999999997
Ага осталось дождаться вот этого продукты и все будет пучком http://www.msfirefox.com.
По долгу службы не однократно сталкивался и продолжаю сталкиваться с неоднозначным отображением html и css в разных броузерах.
P.S. Мне кажется, что
пишется так
Я уже устаю колдовать над CSS и время от времени рука тянеться в слайсам, по возрасту, сравнимыми с возрастом моего младшего брата
А можна и скриптами переписать, но рывками при прокрутке двигаеться.
з.ы. Задолбали не могут ни о чем договриться…..
ITs Like ME
[url=http://myurl.com.tw/jcos]casino bonus[/url]
Полезные заметки. Вдобавок могу посоветовать статейку о
разметке, основанной на абсолютном позиционировании.
Надеюсь пригодиться.
Проще всего создавать такие разметки с помощью JavaScript инструментов.
Спасибо sams очень пригодилось.
Проблема появляется, если располагать таким способом какой-либо блок
http://www.artlebedev.ru/tools/technogrette/html/fixed_in_msie/