Как совместить пиксел к пикселу фон и содержимое во всех браузерах
Я постоянно слышу, как начинающие
дизайнеры жалуются что, когда им нужно совместить какую-то
картинку и фон, то в разных браузерах выглядет по разному.
Многие говорят, что выхода нет. Я тоже так думал и постоянно
создавал 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%). Под
словом "всё" я подразумеваю границы.
Единственная
проблема - эта та полоска внизу в Нетскапах.
|
|