Кроссброузерные баги с DIV

[Хакер]

DIV имеет ширину, установленную через CSS-стиль. А также паддинг, установленный через те же CSS-стили.

Внутри див-а - A-шки и IMG-шки, с нулевыми паддингами и маргинами.

Под IE див имеет ту ширину, которая прописана в style.
Под Оперой - аналогично.

Под FireFox-ом див имеет фактическую ширину, равную стилевой ширине + всем горизонтальным паддингам.



Т.е. предположим, что у нас есть DIV, ширина которого - 100px, а паддинг - 10px.

Реальная ширина:
... под IE - 100px
... под Оперой - 100px
... под FireFox-ом - 120px (что на 20px больше, чем надо).

Каков выход из этой проблемы?

[Antonariy]

Нужно поэкспериментировать с DOCTYPE.
http://www.artlebedev.ru/tools/technogr ... /doctype2/

[Хакер]

Antonariy
Спасибо

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

По моему - это тупизм. Допустим мне надо розовый DIV, который должен быть ровно на половину страницы с паддингом 100px.

Раньше бы я юзал width: 50%; padding: 100px; - теперь же DIV будет больше на 200px чем надо. Как теперь мне решать эту проблему?


________

Попутно:
А как прилепить элемент (в моём случае - IMG) к правой границе документа (а не viewport-а броузера!)?

Мой img отображается поверх таблицы, поэтому у него стоит:
position: absolute; top: 1px; right: 0px;

В этом случае картинка ведёт себя правильно вплоть до того момента как страница перестаёт стягиваться. Т.е. когда при изменении размера броузера размер страницы достигает минимальной величины (установленной мною) - страница перестаёт сжиматься и начинает скроллиться по горизонтали. Но IMG продолжает двигаться вместе с правой границей окна броузера.

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

Если же ставить float: right; то я не знаю, как при этом сделать так, чтобы картинка была именно над таблицей, а не под или справа.

[alibek]

Вообще-то все подобные проблемы решаются хаками.
Проблема с padding типичная и решений к ней множество, искать можно, например, через "хак padding". Есть решение и через JScript (с определением браузера), и через задание стиля.
Завтра могу поискать, у меня где-то закладки были на CSS-related сайты и блочную верстку.