Для начала я приведу небольшой фрагмент из книги Дмитрия Кирсанова "Веб-дизайн" (с.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>
Похоже, волшебное заклинание найдено!