faq of Ru.html.Chainik


правила · список вопросов · преамбула · обратная связь

5. Обеспечение совместимости с устаревшими и нестандартными браузерами

5.1. Как сделать ссылку, которая никак не проявляет себя, как ссылка?

Это бывает нужно для изменения картинки по наведению мыши (4.8), а также для эмуляции title в NN4 (5.8)

<style type="text/css"><!-- a.hiddenlink, a.hiddenlink:link, a.hiddenlink:visited, a.hiddenlink:active, a.hiddenlink:hover {   color:...цвет текста по умолчанию...;   text-decoration:none;   cursor:default; } --></style> ... <a href="javascript:;" class="hiddenlink">
5.2. Как сделать буквицу, если браузер не понимает :first-letter? Например, так:
/\ вот и начался /__\ мой новый / \ абзац! <table border="0" cellspacing="6" cellpadding="0" align="left"> <tr> <td bgcolor="#000000"><font size="7" color="#FFFFFF" style="font-family:sans-serif;font-size:300%;"><b>&nbsp;А&nbsp;</b></font> </td> </tr> </table>вот и начался мой новый абзац!

Буквица - буква между двумя &nbsp; в <td>.

Параметры bgcolor в <td>, color, size и style в <font> задавать по вкусу ;)

5.3. Как окружить табличку рамкой нужного цвета, если браузер не понимает CSS?

Это возможно, но если просто прописать bordercolor (!), то в NN рамка будет объемная, а в IE - монотонная.

Чтобы рамка была объемной и в IE, и в NN, надо для IE прописать в <table> параметры bordercolorlight="#RRGGBB" (!) и bordercolordark="#RRGGBB" (!), которые нужно узнать, открыв страницу в NN, сделав Print Screen, вставив образ экрана в графический редактор и узнав RGB-цвет светлых и темных «граней» рамки.

Чтобы рамка была монотонной и в IE, и в NN, делаем так:

<table border="0" cellspacing="0" cellpadding="...толщина отступа..." bgcolor="...цвет бордера..."> <tr> <td> <table width="100%" border="0" bgcolor="...цвет фона..."> ..Наша табличка... </table> </td> </tr> </table>
5.4. Как "разлиновать" табличку тонкими линиями нужного цвета, если браузер не понимает CSS?
<table border="0" cellspacing="0" cellpadding="0" bgcolor="...цвет линий...> <tr> <td> <table width="100%" cellspacing="...толщина линий..." border="0"> <tr bgcolor="...цвет фона первой строки..."> ..первая строка... </tr> <tr bgcolor="...цвет фона второй строки..."> ..вторая строка... </tr> ... </table> </td> </tr> </table>
5.5. Чтобы в NN4 в таблице было несколько колонок с фиксированным размером, и одна или несколько, занимающих оставшуюся часть таблицы?

Нужно в верхнем ряду таблицы поставить в фиксированных ячейках width="XXX", а в той, что должна занимать остальную часть таблицы, прописать width="100%". При этом, если контент фиксированных ячеек по ширине меньше, чем номинальная ширина ячейки, то нужно в такую ячейку поставить «распорку» - пустой прозрачный gif с параметром width, равным ширине ячейки за вычетом удвоенного cellpadding таблицы.

Если «свободных» ячеек должно быть больше одной, то пропишите их размер в процентах, так, чтобы соотношение процентов соответствовало желаемому соотношению размеров, а сумма составляла 100%. Hапример, width="33%" и width="67%" сделает две ячейки, одна вдвое шире другой.

5.6. Чтобы избежать появления пустой строки после закрытия тегов <hN> и <form> в NN4?

Hужно поместить их в <div> с уменьшенной с помощью CSS высотой строк, а в самих тегах прописать нормальную высоту строк:

<style type="text/css"><!-- div.noemptystrings{   line-height:0.4em; } div.noemptystrings form,div.noemptystrings h1,div.noemptystrings h2 {   line-height:1.2em; } --></style> ... <div class="noemptystrings"> <h1>Заголовок 1</h1> <h2>Заголовок 2</h2> <form> Элементы формы... </form> </div>

Значения 0.4em и 1.2em в стилях ориентировочные, их нужно «подгонять» в зависимости от используемых размеров шрифтов.

5.7. Чтобы пустая ячейка таблицы показывалась в NN4- и Mozilla/NN6?

Для Mozilla/NN6 используем CSS:

table { empty-cells:show; }

Для NN4- нужно поместить в ячейку   или «пустой» gif, с применением правил, описанных в п. 2.23

5.8. Чтобы комментарий (параметр title) показывался в NN4?

Это можно сделать только для ссылок и для некоторых элементов формы. Если в NN4 нужно показывать комментарий для других элементов HTML, нужно поместить их в «пустую» ссылку, как описано в п. 5.1.

Вставляем в <head> скрипт:

<script language="JavaScript" type="text/javascript"><!-- var tipId=0; var tipOffId=0; function showTip(tipTxt,x,y) {   if (document.layers) {     if (!document.layers.tip) {       document.layers.tip=new Layer(window.innerWidth)     }     document.layers.tip.left=x-5;     document.layers.tip.top=y+15;     document.layers.tip.document.open();     document.layers.tip.document.write('<table border="0" '+     'cellspacing="0" cellpadding="1"><tr><td bgcolor="#000000">'+     '<table border="0" cellspacing="0" cellpadding="1"><tr><td '+     'style="background:#FFFFCC;font-family:sans-serif;"><small '+     'style="font-size:8pt;">'+unescape(tipTxt)+'</small></td></tr>'+     '</table></td></tr></table>');     document.layers.tip.document.close();     document.layers.tip.visibility='show'     tipOffId=setTimeout('tipOff();',6000)   } } function tipOn(tipTxt,eventObj) {   if (document.layers) {     tipId=setTimeout('showTip(\''+escape(tipTxt)+'\','+       eventObj.x+','+eventObj.y+');',500);   } } function tipOff() {   if (document.layers) {     clearTimeout(tipId);     clearTimeout(tipOffId);     if (document.layers.tip) {       document.layers.tip.visibility='hide'     }   } } //--></script> ... <a href="page.html" title="Комментарий" onmouseover="tipOn('Комментарий',event);" onmouseout="tipOff();">
5.9. Чтобы <iframe> показывался в NN4?

Это возможно, если вставляемая страничка не содержит скриптов и если <iframe> лежит не в ячейке таблицы.

Для начала вставляем в <head> скрипт:

<script language="JavaScript" type="text/javascript"><!-- function chIframe(lnk) {   if (document.layers){     if (document.layers[lnk.target]) {       if (document.layers[lnk.target].origX==undefined) {         document.layers[lnk.target].origX=           document.layers[lnk.target].pageX;         document.layers[lnk.target].origY=           document.layers[lnk.target].pageY;       }       with (document.layers[lnk.target]) {         left=origX;         clip.left=-origX;         top=origY;         clip.top=-origY;        src=lnk.href;       }     }     return false;   } else return true; } //--></script>

А <iframe> прописываем так:

<iframe name="myIframe" src="myiframe.html" width="X" height="Y"> <div id="myIframe" style="position:relative;width:X;height:Y;include-source:url('myiframe.html');"> Ваш браузер не поддерживает вложения HTML-документов. Нажмите <a href="myiframe.html" target="myIframe">сюда</a>, чтобы увидеть документ в новом окне. </div> </iframe>

Если вы хотите, чтобы ваша ссылка изменяла содержимое iframe, пропишите ее так:

<a href="newpage.html" target="myIframe" onсlick="return chIframe(this);">
5.10. Чтобы фон странички оставался неподвижным при прокрутке в NN4?

Вот пример:

<html> <head> <title>Страничка с неподвижным фоном</title> <style type="text/css"> <!-- body{   background-image:URL('back.gif');   background-attachment:fixed;   margin:0px;padding:0px; } #body{position:absolute;z-index:1;width:auto;} --> </style> <script language="JavaScript1.2" type="text/javascript"><!-- var oldScrollX=0; var oldScrollY=0; var NN=((document.layers)?true:false); function fixBg() {   if (window.pageXOffset!=oldScrollX || window.pageYOffset!=oldScrollY){     document.layers.bg.left=oldScrollX=window.pageXOffset;     document.layers.bg.top=oldScrollY=window.pageYOffset;   } } function makeBg() {   if (NN) {     document.layers.bg = new Layer(window.innerWidth);     document.layers.bg.left = 0;     document.layers.bg.top = 0;     document.layers.bg.height = window.innerHeight;     document.layers.bg.background.src = 'back.gif';     document.layers.bg.visibility = 'show';     document.layers.bg.zIndex = 0;     document.layers.bg.document.open();     document.layers.bg.document.write('<table width="100%" '+       'height="105%" border="0" cellspacing="0" cellpadding="0">'+       '<tr><td> </td></tr></table>')     document.layers.bg.document.close();     setInterval("fixBg();",100);   } } //--></script> </head> <body background="back.gif" onload="makeBg();"><script language="JavaScript1.2"><!-- if (NN) document.write('<div id="body">') //--></script> ... ... ... Baш HTML ... ... ... <script language="JavaScript1.2"><!-- if (NN) document.write('</div><table height="NNNN">'+ // //Здесь пишем высоту странички в пикселах при разрешении 640x480 '<tr><td> </td></tr></table>'); //--></script></body> </html>

правила · список вопросов · преамбула · обратная связь · наверх


По материалам эхоконференции RU.HTML.CHAINIK (news://fido7.ru.html.chainik)