Как совместить пиксел к пикселу фон и содержимое во всех браузерах
Я постоянно слышу, как начинающие дизайнеры жалуются что, когда им
нужно совместить какую-то картинку и фон, то в разных браузерах выглядет
по разному. Многие говорят, что выхода нет. Я тоже так думал и постоянно
создавал javascript, который бы выбирал, какой Background использовать для
разных броузеров.
Я нашёл выход и теперь не понимаю, как я раньше
не догодался! Работает он с MSIE3, MSIE4, NN3, NC4. Напомню, что 97%
юзеров используют один из них (или два (или три, как я)). Сразу
предупреждаю, что я не скажу ни слова о CSS, так как мой способ работает
для всех броузеров, включая NN3.
Сначала я покажу разницу в том,
как работают MSIE и NETSCAPE с margins, а потом напишу code, который нужно
использовать. Также я полностью уверен, что другого выхода
нет!!!
Речь поведу о третей и четвёртой версиях Нетскейпа. Они обе
ничем не отличаются в плане margins, кроме того, что в четвёртой версии
введён тэг <BODY MARGINWIDTH=# MARGINHEIGHT=#>, подобный тэгу MSIE
<BODY TOPMARGIN=# LEFTMARGIN=#>, который присутствует в третей и
четвёртой версиях MSIE. Разумеется Netscape не захотел просто взять и
использовать такие же имена для параметров, и использовал параметр
когда-то придуманного ими тэга для <FRAME MARGINWIDTH=#
MARGINHEIGHT=#>, о загадочности которого я ещё расскажу.
То есть
можно подвести маленький итог! Используя <BODY MARHINHEIGHT=0
MARGINWIDTH=0 TOPMARGIN=0 LEFTMARGIN=0> в MSIE3, MSIE4 и NC4, можно
абсолютно избавиться от margins.
На этом я мог бы и закончить свою
статью, но вы скажите: "А какже NETSCAPE 3? 40% юзеров его используют."
Так вот именно поэтому я и пишу эту статью.
В чём главная проблема!
Как вы и поняли в NC4 можно контролировать расположение content'а на
страничке. Но! В Нетскейпе 3, увы нельзя. Что бы вы не делали, у вас
всегда будет margin сверху и слева около 5 пикселов. Я точно не знаю
сколько. Достаточно много. Единственный способ от них избавиться, это...
использовать фреймы! Да, да, фреймы! Нужно просто напросто создать два
фрэйма:
<FRAMESET ROWS="*,0">
Первый фрэйм - это ваша
страничка, а второй пустой. Лучше всего туда
положить
<HTML></HTML>
Сделав это, вы мне
скажите: "Ни фига. Всё равно есть граница. Дело в том, что вы забыли, что
главный фрэйм дожен иметь при себе MARGINHEIGHT=0
MARGINWIDTH=0:
<FRAME NAME="home" SRC="home.html"
MARGINHEIGHT="0" MARGINWIDTH="0">
Перед тем, как это сделать,
проверьте, чтобы в файле HOME.HTML, не было MARGINGHEIGHT и MARGINWIDTH в
таге BODY. Иначе вы можете испортить совместимость страницы в NN3 и
NC4.
Сделав это, вы заметите проблему. В обоих нетскапах всё
выглядит одинаково: вы увидите границу в один пиксел сверху и слева, но в
MSIE границ вообще не будет. Поэтому, вам надо поставить
<BODY
TOPMARGIN=1 LEFTMARGIN=1>
в HOME.HTML. Теперь похоже, что
одинаково. Но нужно кое-что доработать. Во-первых во второй фрэйм нужно
поставить
<FRAME ... NORESIZE SCROLLING=NO>
А в
FRAMESET:
<FRAMESET ROWS="*,0" BORDER=0>
Если не будет
BORDER=0, то у вас появится белая полоска внизу в MSIE. Проблема, которую
я не мог устранить, это белая полоска внизу у NN3 и NC4, даже если есть
BORDER=0. Чего я только не добавлял в <FRAMESET> и <FRAME>. Я
попробовал всё: BORDER=0, FRAMESPACING=0, FRAMEBORDER=0|NO. Если вы
найдёте выход, то напишите мне. Но нас это не должно сильно волновать. Нам
нужно избавлятся от границ. Цвет той полоски, можно поменять в <BODY
BGCOLOR> в пустом файле.
Ну что ж, кажется всё я сказал. И
теперь покажу вам код... О! Забыл. Я забыл рассказать, как я до сих пор не
могу понять загадачность MARGINWIDTH и MARGINHEIGHT в Нетскапе 3 и 4.
Попробуйте сами, и вы упадёте со стула, когда увидите, как Нетскэйп сам
себя обманывает.
Попробуйте убрать в тэге <FRAME> параметр
MARGINHEIGHT=0. И взгляните на страницу в обоих Нетскэйпах. Верхняя
граница вообще исчезнет, а левая останется! Теперь поставьте обратно и
уберите MARGINWIDTH=0. Левая граница исчезнет, а сверху будет один пиксел!
А теперь прикол, уберите оба параметра! Вы получите ту самую, четырёх-пяти
пиксельную границу.
А теперь попробуйте объяснить мне эту
закономерность в Нетскейпе! Теперь надеюсь вы поняли, что в Нетскапе 3
невозможно избавиться от обеих границ сразу. Считаю, что самым оптимальным
вариантом было бы иметь один пиксел слева и сверху. И вот для этого
код:
INDEX.HTML:
<HTML><HEAD>
<TITLE></TITLE>
</HEAD>
<FRAMESET
ROWS="*,0" BORDER=0>
<FRAME NAME="home" SRC="home.html"
MARGINHEIGHT="0" MARGINWIDTH="0">
<FRAME NAME="empty"
SRC="empty.html" NORESIZE
SCROLLING=NO>
</FRAMESET>
</HTML>
HOME.HTML:
<HTML><HEAD>
<TITLE></TITLE>
</HEAD>
<BODY
TOPMARGIN=1 LEFTMARGIN=1>
Your stuff
</BODY>
</HTML>
EMPTY.HTML:
<HTML>
<BODY BGCOLOR=#FFFFFF> (в
зависимости от цвета в главном фрэйме)
</HTML>
С этим
кодом, вы можете смело создавать BGэшки и совмещать их с contentом на
страничке. Выглядить всё будет одинаково во всех броузерах (97%). Под
словом "всё" я подразумеваю границы.
Единственная проблема - эта та
полоска внизу в Нетскапах.
Источник: www.infocity.kiev.ua
|
