BugTraq.Ru: форум / web building / Абсолютное позиционирование CSS2 vs IE

информационная безопасность
без паники и всерьез

подробно о проекте

Spanning Tree Protocol: недокументированное применение

Анализ криптографических сетевых...

Модель надежности двухузлового...

Специальные марковские модели надежности...

Очередное исследование 19 миллиардов...

Оптимизация ввода-вывода как инструмент...

Зловреды выбирают Lisp и Delphi

bugtraq.ru / форум / web building

Имя

Пароль

если вы видите этот текст, отключите в настройках форума использование JavaScript


ФОРУМ


	все доски
	FAQ
	IRC
	новые сообщения

	site updates
	guestbook
	beginners
	sysadmin
	programming
	operating systems
	theory
	web building
software
hardware
networking
law
hacking
gadgets
job
dnet
humor
miscellaneous
scrap

регистрация

Легенда:

новое сообщение

закрытая нитка

новое сообщение

в закрытой нитке

старое сообщение

Напоминаю, что масса вопросов по функционированию форума снимается после прочтения его описания.
Новичкам также крайне полезно ознакомиться с данным документом.

Абсолютное позиционирование CSS2 vs IE 15.01.04 10:48
Автор: alien <Андрей> Статус: Member
Отредактировано 15.01.04 10:57 Количество правок: 3

<"чистая" ссылка>

Страница, создающая проблему:


<html>
  <head>
    <style>
      div.panels {
        position: absolute;
        top: 0;
        left: 0;
        width: 140px;
        background: green;
      }
      div.main {
        position: absolute;
        top: 0;
        right: 0;
        left: 165px;
        background: red;
      }
    </style>
  </head>
  <body>
    <div class="panels">
      <p>Это первый бокс</p>
    </div>
    <div class="main">
      <p>Это второй бокс</p>
    </div>
  </body>
</html>

Проблема: все браузеры кроме IE отображают второй бокс этой страницы правильно (правый край бокса должен быть возле правого края окна браузера). А этот долбаный Internet Explorer не хочет воспринимать свойство "right: 0;" или чего еще он там не воспринимает. В итоге в IE нормально отображаются только боксы, текст в которых расположен более чем на одну строке. Боксы, в которых текста мало (как в приведенном выше примере) отображаются в IE криво.

Вопрос: Можно ли решить эту проблему не прибегая к табличной разметке? Скажу сразу, что поиски в Интернет особо ни к чему не привели - в статьях про CSS, косяки браузеров и т.п. редко затрагивается тема верстки HTML-страниц нефиксированной ширины, да и Google не дает ничего хорошего.

Заранее спасибо за ответы...

Тоже неоднократно сталкивался с кривостью CSS в IE 15.01.04 13:10
Автор: amirul <Serge> Статус: The Elderman

<"чистая" ссылка>

> Проблема: все браузеры кроме IE
> отображают второй бокс этой страницы правильно (правый край
> бокса должен быть возле правого края окна браузера). А этот
> долбаный Internet Explorer не хочет воспринимать свойство
> "right: 0;" или чего еще он там не
Он не воспринимает два разных позиционирования (left и rigth) по горизонтали. То бишь он может позиционировать или так или так, но не одновременно (а то что можно просто растянуть - в микрософте не знают). По моему единственный нормальный выход - пользоваться свойством width. Если задать ширину в процентах - будет не так уж и рогато, в крайнем случае можно сделать JS, который будет вычислять фиксированную (в px) ширину поля. Пара right/width работает нормально

По поводу ширины в процентах, то я это уже пробовал... 15.01.04 13:20
Автор: alien <Андрей> Статус: Member

<"чистая" ссылка>

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

Насчет JavaScript у меня уже была мысль, но не хотелось бы в самом начале создания сайта начинать все делать через %опу.

А в чем состоит кривость? 15.01.04 12:28
Автор: Ktirf <Æ Rusakov> Статус: Elderman

<"чистая" ссылка>

IE5, IE6, Firebird 0.7, Opera 7.23 - во всех раскладка очень похожа. И во всех right:0 воспринимается почему-то как сколько-то пикселов (165?) правее правой границы клиентской области браузера.

Цитата из спецификации CSS2: 15.01.04 13:11
Автор: alien <Андрей> Статус: Member
Отредактировано 15.01.04 13:12 Количество правок: 1

<"чистая" ссылка>

> IE5, IE6, Firebird 0.7, Opera 7.23 - во всех раскладка
> очень похожа. И во всех right:0 воспринимается почему-то
> как сколько-то пикселов (165?) правее правой границы
> клиентской области браузера.

Цитата из спецификации CSS2:

'right'
...
Это свойство специфицирует, насколько смещён влево правый край содержимого бокса относительно правого края содержащего блока.

Именно так и делают Opera, Mozilla и т.п.

IE @#$ит это свойство. По идее, эта проблема могла бы быть решена чем-нибудь, вроде width: 100% - 140px. Но к сожалению вычисление выражений недоступно в CSS2.

Вот и вопрос состоит в том, есть ли какой-нибудь прием, который все же заставит IE отображать правильно страницу.

Есть одна мысля - кривовато, но все же... 15.01.04 13:40
Автор: Ktirf <Æ Rusakov> Статус: Elderman
Отредактировано 15.01.04 13:42 Количество правок: 1

<"чистая" ссылка>

> Это свойство специфицирует, насколько смещён влево правый
> край содержимого бокса относительно правого края
> содержащего блока.
> Именно так и делают Opera, Mozilla и т.п.
Гм. Я, наверное, чего-то не понимаю, но у меня они делают не так :(
Update: все, я понял что у меня было не так, я уже успел покорежить код, в частности добавить в него width:100%; %-)

Мысля же состоит в следующем: сделать один DIV с position:absolute; width: 100%; left: 0px;, а в него положить те DIV'ы, которые у тебя, уже без position:absolute;, но левый - с float:left;. Проблема в том, что при этом, если в левом слое строк меньше, чем в правом, то правый "выльется" налево там, где закончится левый слой. В случае конкретного контента это может не проявляться.

Page build time: 0 s

Design: Vadim Derkach