Для начала я приведу небольшой фрагмент из книги Дмитрия Кирсанова "Веб-дизайн"
(с.194), чтобы довести до вас суть проблемы.
Заметки о полях. Упомянутые
только что поля -- это не поля, которые устанавливает вокруг содержимого страницы
дизайнер, а те небольшие просветы вдоль левой и верхней границ окна, которые оставляет
сам броузеер. Пользователь не может ни поместить что-либо в эту мертвую зону,
ни повлиять на размеры полей средствами стандартного HTML. Еще хуже то, что величина
этих полей непостоянна — она зависит от марки и версии броузера и от установленного
в данный момент базового кегля шрифта. Из-за этого возникают трудности с точным
совмещением фонового изображения и материала переднего плана — ведь броузер настилает
фоновую картинку по всему пространству окна вплоть до рамки, вне зависимости от
того, насколько отодвинуты от этой рамки текст и изображения переднего плана.
Примечание: проведя небольшое исследование, я составил вот такую табличку
размеров отступов для некоторых браузеров. -- А. В.
| браузер |
Netscape Navigator |
MS Internet Explorer |
Opera |
| платформа |
win32 |
unix |
win32 |
win32 |
| версия |
3.x |
4.x |
3.x |
4.x |
3.x |
4.x |
5.0 |
3.5x |
| отступы |
8px |
8px |
7px |
7px |
10px |
10px |
10px |
10px |
Оговорка относительно "стандартного HTML" не случайна
-- очевидно, поля эти были введены именно для того, чтобы размеченные в минималистском,
академическом стиле тексты можно было читать, не стукаясь взглядом о вплотную
прижатую к тексту рамку окна. Предоставляя со временем все больше оформительской
свободы автору страницы броузеры не могли обойти своим вниманием и этот аспект.
Так, MSIE поддерживает атрибуты leftmargin н topmargin тега BODY, позволяющие
устанавливать любую (в том числе
нулевую и отрицательную) величину полей страницы. Однако и стандарт HTML 4.0,
и броузер Netscape игнорируют эти «MSlE-only» атрибуты.
Более идеологически правильный, хотя и выходящий за рамки
HTML подход - использование CSS-свойств margin-left и margin-top для тега BODY.
К сожалению, незрелость реализации CSS не позволяет воспользоваться даже таким
невинным трюком: дело в том,
что если MSIE отмеряет поле от рамки окна, то NC принимает отправную точку то
"поле по умолчанию", которое имеет место в отсутствие CSS. Поэтому,
чтобы прижать содержимое страницы вплотную к левой рамке окна, в MSIE достаточно
сказать <BODY style="margin- left: 0рх">, тогда как в NC вместо
0рх придется подбирать некую отрицательную величину (около -7рх).
Желание обойтись без CSS заставляет
некоторых дизайнеров прибегать к еще более замысловатому трюку. Пользуясь тем,
что у тега FRAME есть поддерживаемые обоими броузерами атрибуты marginwidth и
marginheight, они заключают всю страницу в единственный фрейм с тем, чтобы иметь
возможность точно устанавливать величину полей.
А вот теперь давайте разберемся!
Во-первых, нам известен простейший способ создания одинаковых полей (в том
числе нулевых) для браузеров NN и MSIE начиная с 4-х версий. Для этого нужно,
чтобы тег BODY выглядел следующим образом:
<BODY LEFTMARGIN="X" TOPMAGIN="Y"
MARGINWIDTH="X" MARGINHEIGHT="Y">
Здесь X - левый отступ, а Y - верхний. Первые два атрибута понимает только
MSIE, вторые два - только NN. (Opera не понимает ни тот, ни другой)
Но эти чисто визуальные атрибуты элемента BODY не входят ни в одну официальную
спецификацию HTML, и их использование противоречит идеологии языка. Куда удобнее
и правильнее было бы использовать CSS, ведь тогда достаточно иметь одну инструкцию
в css-файле для всего сайта. Я полностью соглашаюсь с тов. Кирсановым - с помощью
свойства magrin (margin-top, margin-left) невозможно создать одинаковые поля в
обоих браузерах.
Тут есть один тонкий секрет!
Netscape 4.x знает, что такое CSS-позиционирование. Можно вложить все содержимое
страницы в один общий слой:
<div id="MyBody" style="position:absolute; top:0; left:0">Содержимое
страницы</div>
Но это как-то накладно. А вот если добавить такой style-атрибут к тегу BODY -
результат будет неожиданный: Explorer и Opera его игнорируют (тут им подавай margin,
а не position!), а Netscape создает нулевые (в нашем примере) поля. Остается
только привести стили к общему знаменателю:
<style type="text/css">
body { margin-left:0px; margin-top:0px;
position:absolute; top:0; left:0}
</style>
Похоже, волшебное заклинание найдено!
