Кроссбраузерность или как правильно наступать на WEB грабли

[Ramzes]

Выпал ятжкий труд верстальщика на мою программерскую душу.
Писал писал, на PHP, потом даже Linux себе поднял с Apache PHP и MySql (Не без помощи Хакера, за что ему благодарен). Но по неопытности писал и тестрироовал все в одном браузере (Firefox)... Затем открыл в IE и ужаснулся, потом подумал, открыл в Opera и еще раз ужаснулся.

Так вот, тут же есть бывалые дизайнеры, дайте пару дельных советов по верстке на HTML + CSS

PS Для Хакера
Помнишь странное местораположение файла Socks в моем MySql? Мне Админ наш обьяснил, с чем это может быть связано, с тем, что сначала я ставил MySql через apt-get install mysql-server, потом его снес, а оказываеться apt-get remove сносит не все.

[dr.MIG]

Так тут советы давать как-то сложно -- слишком много возможных неприятностей, связанных с кроссбраузерностью.
В общем случае выход -- это пользоваться для верстки готовыми фреймворками типа YAML.
Ты бы привёл конкретный html-код с указанием различий в отображении в конкретных браузерах, мы бы сказали как исправить их .

[Ramzes]

Косяк первый
firefox

opera

IE


HTML

Код: Выделить всё

<div class="dtree">
   <div class="dTreeNode">
      <img id="id0" src="components/tree.catalog/img/base.png" alt="">
   </div>
   <div class="br-small"></div>
   <div id="dd0" class="clip" style="display: block;">
      <div class="dTreeNode">
         <a href="javascript: d.o(36);">
            <img id="jd36" src="components/tree.catalog/img/plus.png" alt="">
         </a>
         <img id="id36" src="components/tree.catalog/img/usb.png" alt="">
         <a id="sd36" class="node" href="JavaScript:getArticles(1007018692)" onclick="javascript: d.s(36);">Аксессуары USB</a>
      </div>
      <div class="br-small"></div>
      <div id="dd36" class="clip" style="display: none;">
         <div class="dTreeNode">
            <img src="components/tree.catalog/img/empty.gif" alt="">
            <img src="components/tree.catalog/img/item.png" alt="">
            <img id="id35" src="components/tree.catalog/img/green1.png" alt="">
            <a id="sd35" class="node" href="JavaScript:getArticles(1007018692,1006478922)" onclick="javascript: d.s(35);">Your Device</a>
         </div>
         <div class="br-small"></div>
      </div>
      <div class="dTreeNode">
         <a href="javascript: d.o(37);">
            <img id="jd37" src="components/tree.catalog/img/plus.png" alt="">
         </a>
         <img id="id37" src="components/tree.catalog/img/mobile.png" alt="">
         <a id="sd37" class="node" href="JavaScript:getArticles(1007018672)" onclick="javascript: d.s(37);">Аксессуары для мобильных устройств</a>
      </div>
      <div class="br-small"></div>
      <div id="dd37" class="clip" style="display: none;">
         <div class="dTreeNode"><img src="components/tree.catalog/img/empty.gif" alt="">
            <img src="components/tree.catalog/img/item.png" alt="">
            <img id="id12" src="components/tree.catalog/img/green1.png" alt="">
            <a id="sd12" class="node" href="JavaScript:getArticles(1007018672,1000603124)" onclick="javascript: d.s(12);">Defender</a>
         </div>
         <div class="br-small"></div>
      </div>
      <div class="dTreeNode">
         <a href="javascript: d.o(38);">
            <img id="jd38" src="components/tree.catalog/img/plus.png" alt="">
         </a>
         <img id="id38" src="components/tree.catalog/img/audio.png" alt="">
            <a id="sd38" class="node" href="JavaScript:getArticles(994141661)" onclick="javascript: d.s(38);">Аудиоколонки</a>
      </div>
      <div class="br-small"></div>
      <div id="dd38" class="clip" style="display: none;">
      <div class="dTreeNode">
         <img src="components/tree.catalog/img/empty.gif" alt="">
         <img src="components/tree.catalog/img/item.png" alt="">
         <img id="id26" src="components/tree.catalog/img/green1.png" alt="">
         <a id="sd26" class="node" href="JavaScript:getArticles(994141661,994176266)" onclick="javascript: d.s(26);">Targa</a>
      </div>
      <div class="br-small"></div>
   </div>
   <div class="dTreeNode">
      <a href="javascript: d.o(39);">
         <img id="jd39" src="components/tree.catalog/img/plus.png" alt="">
      </a>
      <img id="id39" src="components/tree.catalog/img/bp.png" alt="">
      <a id="sd39" class="node" href="JavaScript:getArticles(994141658)" onclick="javascript: d.s(39);">Блоки питания</a>
   </div>
   <div class="br-small"></div>
   <div id="dd39" class="clip" style="display: none;">
      <div class="dTreeNode">
         <img src="components/tree.catalog/img/empty.gif" alt="">
         <img src="components/tree.catalog/img/item.png" alt="">
         <img id="id1" src="components/tree.catalog/img/green1.png" alt="">
            <a id="sd1" class="node" href="JavaScript:getArticles(994141658,996131756)" onclick="javascript: d.s(1);">Casecom</a>
         </div>
         <div class="br-small"></div>
         <div class="dTreeNode">
            <img src="components/tree.catalog/img/empty.gif" alt="">
            <img src="components/tree.catalog/img/item.png" alt="">
            <img id="id6" src="components/tree.catalog/img/green1.png" alt="">
            <a id="sd6" class="node" href="JavaScript:getArticles(994141658,1006502755)" onclick="javascript: d.s(6);">CWT</a>
         </div>
         <div class="br-small"></div>
         <div class="dTreeNode">
            <img src="components/tree.catalog/img/empty.gif" alt="">
            <img src="components/tree.catalog/img/item.png" alt="">
            <img id="id16" src="components/tree.catalog/img/green1.png" alt="">
            <a id="sd16" class="node" href="JavaScript:getArticles(994141658,994145059)" onclick="javascript: d.s(16);">Fortron</a>
         </div>
         <div class="br-small"></div>
         <div class="dTreeNode">
         <img src="components/tree.catalog/img/empty.gif" alt="">
         <img src="components/tree.catalog/img/item.png" alt="">
         <img id="id18" src="components/tree.catalog/img/green1.png" alt="">
         <a id="sd18" class="node" href="JavaScript:getArticles(994141658,994152423)" onclick="javascript: d.s(18);">LW</a>
      </div>
      <div class="br-small"></div>
      <div class="dTreeNode">
         <img src="components/tree.catalog/img/empty.gif" alt="">
         <img src="components/tree.catalog/img/item.png" alt="">
         <img id="id23" src="components/tree.catalog/img/green1.png" alt="">
         <a id="sd23" class="node" href="JavaScript:getArticles(994141658,994152424)" onclick="javascript: d.s(23);">Power Master</a>
      </div>
      <div class="br-small"></div>
   </div>
...
</div>

CSS

Код: Выделить всё

.br-small{
   height:3px;
}

.dtree {
   font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
   font-size: 11px;
   font-weight:bold;
   color: #CCCCCC;
   white-space: nowrap;
   height:820px;
   overflow:auto;
}
.br-small{
   height:3px;
}
.dtree img {
   border: 0px;
   vertical-align: middle;
}
.dtree a {
   color: #333;
   text-decoration: none;
}
.dtree a.node{
   white-space: nowrap;
   padding: 1px 2px 1px 2px;
}
.dtree a.nodeSel {
   white-space: nowrap;
   padding: 1px 2px 1px 2px;
}

.dtree a.node:hover{
   color: #75bc0a;
   text-decoration: underline;
}
/*Проба заливки веток*/
.dTreeNode
{
   border:thin solid #C1C1C1;
   background: url(img/bg.png) repeat-x;
   height:32px;
}

.dtree a.nodeSel:hover {
   color: #333;
   text-decoration: underline;
}
.dtree a.nodeSel {
   background-color: #75bc0a;
   color: #ffffff;
}
.dtree .clip {
   overflow: hidden;
}


Результат должен быть как в Firefox и Opera

[Хакер]

Доктайп?

[Ramzes]

*.php

[Хакер]

Доктайп?!

[Ramzes]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

[dr.MIG]

Делаем толщину границы в IE такой же как в других браузерах (фтопку thin):
.dTreeNode
{
border:1px solid #C1C1C1;
background: url(img/bg.png) repeat-x;
height:32px;
}

Теперь убираем в IE большой отступ между блоками. Отца русской демократии спасёт код:
.br-small{
height:3px;
font-size: 0;
}

[Ramzes]

Не знаю, как насчет отца русской демократии, а вот скромного человека, это таки спасло
Благодарю, но это еще не конец, надеюсь вы от меня не сбежите

Поехали дальше, общий вид страницы, нормально отображаеться только в firefox


а вот Opera и IE решили отличится, каждый по-своему.
Opera


IE правда еще и на скрипты ругаеться, но с этим я потом буду разбираться


Эта страничка состоит из
header.php
index.php - включает /components/list.catalog/index.php и /components/tree.catalog/index.php но они вроде нормально по отдельности отображаються
footer.php

index.php

Код: Выделить всё

<? /*INDEX*/
   require("header.php");
?>
<table width="25%" align="left">
  <tr>
     <td>
      <?
         include("components/tree.catalog/index.php");
      ?>
   </td>
  </tr>
</table>
<div class="br-small" > </div>
<table width="73%" align="left" class="search-panel">
   <tr>
      <td width="15%">
         <input class="textbox" name="txtSearch" type="text" />
      </td>
      <td width="5%">
         <img src="imgs/search.png" alt="Поиск" />
      </td>
      <td>
         <input type="checkbox" name="chk1">галочка нумер 1</input>
      </td>
      <td>
         <input type="checkbox" name="chk1">галочка нумер 2</input>
      </td>
   </tr>
</table>
<?
   include("components/list.catalog/index.php");   
?>
<?
   include("footer.php");
?>

header.php

Код: Выделить всё

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<link href="style/main.css" type="text/css" rel="stylesheet" />
<meta http-equiv="Content-Type" content="text/html; " />
<title>B2B</title>
<?
/*
php код который не выводт ничего упущен
*/
?>
</head>

<body class="body_index">
<div class="header">
<table width="100%" height="100" border="0" cellpadding="0" cellspacing="0">
      <td width="23%">
         <img src="/images/logo-big.png" alt="qBox" width="221" height="104" />      </td>
      <td width="51%">
         <table class="userinfo" width="100%" height="100%">
            <tr>
                 <td width="50%">Компания: qBox</td>
                  <td width="50%" rowspan="4">Контакты менеджера:
                        <li>Тел: 80501234567</li>
                        <li> ICQ: 123456789</li>
                       <li> E-Mail: mail@.mail.com</li>
               </td>
            </tr>
               <tr>
                 <td>Место доставки:Фрунзе 62Б  </td>
             </tr>
            <tr>
                 <td width="57%">Ваш менеджер: Голубов Д. </td>
             </tr>
            <tr>
                 <td height="18">Курс USD: 1 кг/час</td>
             </tr>
          </table>
         </td>
      <td width="26%">
      </td>
</table>

<table width="100%" height="30px" class="menu-box">
      <td><a href="index.php">Каталог</a></td>
      <td><a href="basket.php">Корзина</a></td>
      <td><a href="#">menuItem</a></td>
</table>
</div>

footer.php

Код: Выделить всё

<br/>
   <table class="footer" width="100%" height="98px">
      <tr>
         <td width="33%"></td>
         <td align="center" valign="middle"><img alt="foot logo" src="imgs/foot_logo.png"/></td>
         <td width="33%"></td>
      </tr>
   </table>
</body>
</html>

одна большая таблица стилей, которая исполдьзуеться почти везде

Код: Выделить всё

.body_index
{
   /*width:1210px;*/
   overflow:auto;
   min-width: 1200px;
}


#list_catalog{
   border:none;
}

.userinfo{
   color:#4a4d49;
}

.error {
   width:100%;
   color: #FF0000;
   border: thin solid #FF0000;
   font-weight: bold;
   font-size: 14px;
}

/*.br-small{
   height:3px;
}*/
.br-small{
   height:3px;
   font-size: 0;
}

.search-panel{
   /*background:#D6D6D6;*/
   background:url(../imgs/sectionHeader.png) repeat-x;
   height:32px;
   vertical-align:middle;
   font-weight:bold;
   color: #333;
   border:thin solid #C1C1C1;
}

/*
- menu styles
*/
.menu-top {
   padding:0px 0px 13px 0px;
   width:100%;
   font-size:14px;
   border: thin solid #ffffff;
   background:url(../imgs/mnuTOP.png) repeat-x;
}

.menu-box {
   padding:0px 0px 13px 0px;
}
.menu-box td {
   background:url(../imgs/mnuTOP.png) repeat-x;
   vertical-align:middle;
   text-align:center;
   padding-right:1px;
   height:32px;
   /*background: #75bc0a;*/
   border-right:1px solid #ffffff;
}
.menu-box td.selected 
{
   background: #4d4746;
}

.menu-box A {
   font-weight:14px;
   color: #ffffff;
   text-decoration:none;
   
}

.navigator
{
   color: #4a4d49;
   font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
   font-size: 12px;
   font-weight:bold;
   color: #CCCCCC;
}

a
{
   color: #4a4d49;
   text-decoration:none;
}

.navigator a:hover
{
   color:#75bc0a;
   text-decoration:underline;
}

/*.navigator td
{
   border-right-width: thin;
   border-bottom-width: thin;
   border-right-style: solid;
   border-bottom-style: solid;
   border-right-color: #75bc0a;
   border-bottom-color: #75bc0a;
}*/

.cat-table
{
   font-family: Arial;
   font-size: 10px;
   font-style: normal;
   line-height: normal;
   font-weight: normal;
   font-variant: normal;
   background-color:#D5D5D5;
   color:#4a4d49;
}

.cat-table-header{
   font-size:12px;
   /*background: url(/images/desc.png) no-repeat center;*/
   text-align:center;
   cursor:pointer;
   color:#4a4d49;
}

.cat-table td{
/*   color:#4a4d49;*/
   background: #E9E9E9;
   margin: 2px;   
}

.digit-cell{
   vertical-align:middle;
   text-align:center;
}

.url-cell{
   cursor:pointer;
}

.cat-table tr:hover{
/*   background:#75bc0a; */
   color:#75bc0a;

}

.cat-textbox {
   background:#ffffff url(/images/input-bg.gif) repeat-x scroll 0% 100%;
   border:1px solid #B7B5B5;
   font-size:10px;
   padding:2px 5px;
   color: #4a4d49;
   vertical-align:middle;
   text-align:center;
}

.textbox {
   background:#ffffff url(/images/input-bg.gif) repeat-x scroll 0% 100%;
   border:1px solid #B7B5B5;
   font-size:14px;
   padding:2px 5px;
   color: #4a4d49;
   vertical-align:middle;
}

.sectionHeader{
   background:url(../imgs/sectionHeader.png) repeat-x;
   height:32px;
   vertical-align:middle;
   text-align:center;
   font-weight:bold;
   color: #333;
   border:thin solid #C1C1C1;
}

.BigSectionHeader{
   background:url(../imgs/sectionHeader.png) repeat;
   height:32px;
   vertical-align:middle;
   text-align:center;
   font-weight:bold;
   color: #333;
   border:thin solid #C1C1C1;
}

.art_Description{
   height:150px;
   overflow:auto;
}

.basket_reserv{
   /*background:url(../imgs/basket.reserv.png) repeat-x;*/
   height:500px;
}

.reservItem
{
   border:thin solid #C1C1C1;
   background: url(../imgs/sectionHeader.png) repeat-x;
   height:32px;
   vertical-align:middle;
}

.basket_summ{
   width:312px;
   background:url(../imgs/basket/suma.png) center no-repeat;
   text-align:right;
   font-weight:bold;
   color: #4A4D49;
}


.catalog-price {
    color:red;
}


table.product-box {
        background: #F3F4F5;
        width:100%;
}
table.product-box TD{
        border:7px solid #F3F4F5;
        background: #ffffff;
}

table.product-box .product {
        border:0px;
}


.catalog-element td
{
   background-color: #f0f0f0;
   padding:10px 10px;
}

.footer{
   position:static;
   bottom:0px;
   background: url(../imgs/footer.png) repeat-x;
}


[dr.MIG]

Кстати, ещё забыл сказать про проблемы с картинками в IE (там, где у тебя фон отображается некрасиво). У тебя картинки в формате png, а IE с ними не очень дружит. Либо поменяй форат, либо придётся извращаться. Способ извращения выбери сам в гугле по запросу "png IE" .

Кстати, я что-то не очень понимаю возможные причины последней проблемы. Там динамически формируется таблица (где заголовок Код, Название, Гарантия и т.д.). Опера не отображает её вообще, а IE отображает только заголовок. Такое ощущение, что где-то (в генерирующем её скрипте) в HTML-код самой таблицы закралась ошибка.

[Ramzes]

По поводу картинок Хакер меня уже просвятил, это задача дизайнра, он пускай их и конвертит в нужный формат.

Таблица генерируеться скриптом
получается что-то вроде

Код: Выделить всё

<table class="cat-table" width="73%" height="100%">
<thead>
<tr>
<!--&nu;-->
   <td><div class="cat-table-header">Код</div></td>
   <td><div class="cat-table-header">Название</div></td>
   <td><div class="cat-table-header">Гарантия</div></td>
   <td><div class="cat-table-header">Наличие</div></td>

   <td><div class="cat-table-header">Цена</div></td>
   <td><div class="cat-table-header">Заказать</div></td>
   <td><div class="cat-table-header">Штрихкод</div></td>
   <td><div class="cat-table-header">Кол-во в ящике</div></td>
   <td><div class="cat-table-header">Розн.цена</div></td>
</tr>
</thead>

<tbody id="catalogTable">
   <tr>
      <td class="digit-cell">568</td>   
      <td class="url-cell" onclick="window.open('article.php?id=568','mywindow','width=640,height=480')">Корпус ComsCom TERRACE (Ivory+Ivory+Ivory) USB, БП PM-300W, CE+TUV</td>   
      <td class="digit-cell">12</td>   
      <td class="digit-cell">14</td>   
      <td class="digit-cell">46.5</td>   
      <td class="digit-cell">
         <input class="cat-textbox" size="4" value="0" name="568" onfocus="cID=this.name;" onchange="cIDChanged=1;" onblur="doLoad('components/backEnd.php?action=updateQnty&amp;intCode=568', '568');" type="text">
      </td>   
      <td class="digit-cell"></td>   
      <td class="digit-cell">0</td>   
      <td class="digit-cell">50</td>   
   </tr>
   ...
   </tbody>
</table>


но дело не в таблице.

в моем случе footer оказываеться под таблицей, а хотелось бы, что он был не под чем-то а внизу стриницы.

Дальше сама таблица в opere ушла вправо, а должна быть под строкой поиска (это то место где есть "галочка нумер 1 галочка нумер 2 ")

[Amed]

Кроссбраузерность - это всегда весело.

[dr.MIG]

Так там на картинке не видно, что что-то вправо уехало, откуда же мне знать . Видимо таблица в div'е располагается и проблема в его стилях. Но так очень сложно всё смотреть по кускам. Ты бы лучше взял сохранил сгенерированную страничку как статический html, добавил бы стили и картинки и прикрепил сюда. Так бы было проще и быстрее решить проблему.

P.S. хоть это и не имеет отношения к отображению страницы, но всё же -- у тебя в качестве значения параметра name элемента input указывается число. А ведь

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

[Ramzes]

Это я учту, а по поводу того, что, страница разъезжалась, все решилось достаточно просто, я все основные элементы засунул в одну большую таблицу

[Ramzes]

Я продолжаю наступать на грабли
FireFox и Opera вполне адекватно кушают все мои скрипты, а вот IE, снова мен подводит (чем же я ему насолил, неужели переходм на Firefox?)

и так, ругаеться он вот на эту строку

Код: Выделить всё

document.getElementById("catalogTable").innerHTML = request.responseText;

код целиком

Код: Выделить всё

   var cID;
   var cIDChanged;
   var request;
   /*
    * Load XMLDoc function
    * Здесь в качестве параметра url при вызове мы должны указать
    * backend-скрипт, который, собственно, и получит данные с сервера
    */
   sendUrl('components/list.catalog/backEnd.php?page=1');
   //загружает грид по заданым фильтрам
   function getArticles(type, vendor, page)
   {
      url = 'components/list.catalog/backEnd.php';
      getFilter = '';
      if (typeof(type) == 'undefined')
      { type=0; }

      if (typeof(vendor) == 'undefined')
      { vendor=0; }

      if (typeof(page) == 'undefined')
      { page=0; }

      if (type > 0)
      { getFilter = '?type=' + type;   }

      if (vendor > 0)
      {
         if (getFilter.length > 0)
         { getFilter += '&'; }
         else
                   { getFilter += '?'; }

         getFilter += 'vendor=' + vendor;
      }
      if (page > 0)
      {
         if (getFilter.length > 0)
         { getFilter += '&'; }
         else
         { getFilter += '?'; }

         getFilter += 'page=' + page;
      }
      url += getFilter;
      sendUrl(url);
   }
   
   function sendUrl(url)
   {
       if (window.XMLHttpRequest)
      {
         request = new XMLHttpRequest();
         request.onreadystatechange = processRequestChange;
         request.open("GET", url, true);
         request.send(null);
      }
      else if (window.ActiveXObject)
      {
         request = new ActiveXObject("Microsoft.XMLHTTP");
         if (request)
         {
            request.onreadystatechange = processRequestChange;
            request.open("GET", url, true);
            request.send();
         }   
      }
   }
   
   function doLoad(url, name)
   {
      if (cID == -1 || name != cID || cIDChanged == 0)
      { return; }
      var e;
      e = document.getElementsByName(name);
      url = url + '&qnty=' + e[0].value;
      sendUrl(url);
      cID = -1;
      cIDChanged = 0;
   }
   
   /*
    * Event on request change
    * Собственно, обработчик события onreadystatechange.
   */
   function processRequestChange()
   {
      abortRequest = window.setTimeout("request.abort();", 10000);
      // если выполнен
      if (request.readyState == 4)
      {
         clearTimeout(abortRequest);
             // если успешно
         if (request.status == 200)
         {
            if (request.responseText.length > 1)
            {
[b]//ТУТ ОШИБКА[/b]
               document.getElementById("catalogTable").innerHTML = request.responseText;
            }
         }
         else
         {
            alert("Не удалось установить соединение с сервером\n" + request.statusText);
         }
      }
   }
   
   function reload(url)
   {
      alert(url);
      document.getElementById("catalogTable").innerHTML = url;
   }


[Ramzes]

Вобщем эти грабли я успешно перестпул, или думаю, что переступил, суть в том, что я пытался доавить таблицу, а IE оказываеться не поддержвает такой суровый (по его мнению) метод, решение проблемы

[Ramzes]

Кто подскажет, почему при добавлении ссылки для изображения, вокруг изображения появляется рамка?

HTML

Код: Выделить всё

<a href="../b2b"><img src="imgs/b2b.png" alt="b2b" width="221" height="104" /></a>


CSS

Код: Выделить всё

a{
   color: #4a4d49;
   text-decoration:none;
}


a_border.jpg

решение

<a href="../b2b"><img src="imgs/b2b.png" alt="b2b" width="221" height="104" border="0" /></a>

[dr.MIG]

Или, что бы не писать для каждого img этот атрибут, можно добавить стиль img {border: none}.

[Ramzes]

тоже мысль, спасибо