Форум

lamer · #1 (**permalink**) 20.06.2012, 09:19

Здравствуйте, такая ситуация, начал выравнивать HTML код через онлайн сервисы JS beautifier, сделало отступы все красиво, но в IE таблицу потянуло, стали большие отступы.

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

Deff · #2 (**permalink**) 20.06.2012, 09:34

lamer,
ссылка есть ? (Неудобно лечить зубы по описанию зубов

lamer · #3 (**permalink**) 20.06.2012, 10:22

Сообщение от Deff

lamer,
ссылка есть ? (Неудобно лечить зубы по описанию зубов

Оригинал:

<html>

<head>
</head>

<body>
<table cellpadding="0" cellspacing="0" border="0" width="155">
<tr>
<td bgcolor="#ffffff"><img src="cms/images/1.gif" width="1" height="1" border="0" alt=""></td>
<td bgcolor="#EEEEEE" width="155px">
<table cellpadding="0" cellspacing="0" border="0" width="155" >
<tr>
<td colspan="3" bgcolor="#cccccc"><img src="cms/images/1.gif" width="155" height="1" border="0" alt=""></td>

</tr>
<tr style="background-image:url(cms/images/bg_gelb.gif)">
<td valign="top" width="10px" style="padding:5px 1px 5px 4px"><img src="cms/images/3.gif" width="10" height="14" border="0" alt=""></td>
<td colspan="2" width="137" align="left" style="padding:5px 5px 5px 0px;">
<a class="nav1neu" href="javascript:void(0);">INDEX</a></td>
</tr>
<tr>
<td colspan="3" bgcolor="#cccccc"><img src="cms/images/1.gif" width="100%" height="1px" border="0" alt=""></td>
</tr>
<tr>
<td valign="top" style="padding:5px 0px 5px 4px;" width="10px"><img src="cms/images/3.gif" width="10px" height="14px" border="0" alt=""></td>
<td colspan="2" align="left" style="padding:5px 5px 5px 0px;" width="137px">
<a class="nav1neu" href="javascript:void(0);">INDEX</a></td>
</tr>
<tr>

<td colspan="3" bgcolor="#cccccc"><img src="cms/images/1.gif" width="100%" height="1px" border="0" alt=""></td>
</tr>
<tr>
<td valign="top" style="padding:5px 0px 5px 4px;" width="10px"><img src="cms/images/3.gif" width="10px" height="14px" border="0" alt=""></td>
<td colspan="2" align="left" style="padding:5px 5px 5px 0px;" width="137px">
<a class="nav1neu" href="javascript:void(0);">INDEX</a></td>
</tr>
<tr>
<td colspan="3" bgcolor="#cccccc"><img src="cms/images/1.gif" width="100%" height="1px" border="0" alt=""></td>
</tr>
<tr>
<td valign="top" style="padding:5px 0px 5px 4px;" width="10px"><img src="cms/images/3.gif" width="10px" height="14px" border="0" alt=""></td>
<td colspan="2" align="left" style="padding:5px 5px 5px 0px;" width="137px">
<a class="nav1neu" href="javascript:void(0);">INDEX</a></td>
</tr>
<tr>
<td colspan="3" bgcolor="#cccccc"><img src="cms/images/1.gif" width="100%" height="1px" border="0" alt=""></td>

</tr>
<tr>
<td valign="top" style="padding:5px 0px 5px 4px;" width="10px"><img src="cms/images/3.gif" width="10px" height="14px" border="0" alt=""></td>
<td colspan="2" align="left" style="padding:5px 5px 5px 0px;" width="137px">
<a class="nav1neu" href="javascript:void(0);">INDEX</a></td>
</tr>
<tr>
<td colspan="3" bgcolor="#cccccc"><img src="cms/images/1.gif" width="100%" height="1px" border="0" alt=""></td>
</tr>
<tr>
<td valign="top" style="padding:5px 0px 5px 4px;" width="10px"><img src="cms/images/3.gif" width="10px" height="14px" border="0" alt=""></td>
<td colspan="2" align="left" style="padding:5px 5px 5px 0px;" width="137px">
<a class="nav1neu" href="javascript:void(0);">INDEX</a></td>
</tr>
<tr>
<td colspan="3" bgcolor="#cccccc"><img src="cms/images/1.gif" width="100%" height="1px" border="0" alt=""></td>
</tr>

<tr>
<td valign="top" style="padding:5px 0px 5px 4px;" width="10px"><img src="cms/images/3.gif" width="10px" height="14px" border="0" alt=""></td>
<td colspan="2" align="left" style="padding:5px 5px 5px 0px;" width="137px">
<a class="nav1neu" href="javascript:void(0);">INDEX</a></td>
</tr>
<tr>
<td colspan="3" bgcolor="#cccccc"><img src="cms/images/1.gif" width="100%" height="1px" border="0" alt=""></td>
</tr>
<tr>
<td valign="top" style="padding:5px 0px 5px 4px;" width="10px"><img src="cms/images/3.gif" width="10px" height="14px" border="0" alt=""></td>
<td colspan="2" align="left" style="padding:5px 5px 5px 0px;" width="137px">
<a class="nav1neu" href="javascript:void(0);">INDEX</a></td>
</tr>
<tr>
<td colspan="3" bgcolor="#cccccc"><img src="cms/images/1.gif" width="100%" height="1px" border="0" alt=""></td>
</tr>
<tr>

<td valign="top" style="padding:5px 0px 5px 4px;" width="10px"><img src="cms/images/3.gif" width="10px" height="14px" border="0" alt=""></td>
<td colspan="2" align="left" style="padding:5px 5px 5px 0px;" width="137px">
<a class="nav1neu" href="javascript:void(0);">INDEX</a></td>
</tr>
<tr>
<td colspan="3" bgcolor="#cccccc"><img src="cms/images/1.gif" width="100%" height="1px" border="0" alt=""></td>
</tr>
<tr>
<td valign="top" style="padding:5px 0px 5px 4px;" width="10px"><img src="cms/images/3.gif" width="10px" height="14px" border="0" alt=""></td>
<td colspan="2" align="left" style="padding:5px 5px 5px 0px;" width="137px">
<a class="nav1neu" href="javascript:void(0);">INDEX</a></td>
</tr>
<tr>
<td colspan="3" bgcolor="#cccccc"><img src="cms/images/1.gif" width="100%" height="1px" border="0" alt=""></td>
</tr>
<tr>
<td valign="top" style="padding:5px 0px 5px 4px;" width="10px"><img src="cms/images/3.gif" width="10px" height="14px" border="0" alt=""></td>

<td colspan="2" align="left" style="padding:5px 5px 5px 0px;" width="137px">
<a class="nav1neu" href="javascript:void(0);">INDEX</a></td>
</tr>
<tr>
<td colspan="3" bgcolor="#cccccc"><img src="cms/images/1.gif" width="100%" height="1px" border="0" alt=""></td>
</tr>
<tr>
<td valign="top" style="padding:5px 0px 5px 4px;" width="10px"><img src="cms/images/3.gif" width="10px" height="14px" border="0" alt=""></td>
<td colspan="2" align="left" style="padding:5px 5px 5px 0px;" width="137px">
<a class="nav1neu" href="javascript:void(0);">INDEX</a></td>
</tr>
<tr>
<td colspan="3" bgcolor="#cccccc"><img src="cms/images/1.gif" width="100%" height="1px" border="0" alt=""></td>
</tr>
<tr>
<td valign="top" style="padding:5px 0px 5px 4px;" width="10px"><img src="cms/images/3.gif" width="10px" height="14px" border="0" alt=""></td>
<td colspan="2" align="left" style="padding:5px 5px 5px 0px;" width="137px">
<a class="nav1neu" href="javascript:void(0);">INDEX</a></td>

</tr>
<tr>
<td colspan="3" bgcolor="#cccccc"><img src="cms/images/1.gif" width="100%" height="1px" border="0" alt=""></td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="155px" colspan="2"><img src="cms/images/1.gif" width="155" height="6" border="0" alt=""></td>
</tr>
</table>
</body>
</html>

lamer · #4 (**permalink**) 20.06.2012, 10:22

Выровнял:

<html>

<head>
</head>

<body>
<table cellpadding="0" cellspacing="0" border="0" width="155">
   <tr>
      <td bgcolor="#ffffff">
         <img src="cms/images/1.gif" width="1" height="1" border="0" alt="">
      </td>
      <td bgcolor="#EEEEEE" width="155px">
         <table cellpadding="0" cellspacing="0" border="0" width="155">
            <tr>
               <td colspan="3" bgcolor="#cccccc">
                  <img src="cms/images/1.gif" width="155" height="1" border="0" alt="">
               </td>
            </tr>
            <tr style="background-image:url(cms/images/bg_gelb.gif)">
               <td valign="top" width="10px" style="padding:5px 1px 5px 4px">
                  <img src="cms/images/3.gif" width="10" height="14" border="0"
                  alt="">
               </td>
               <td colspan="2" width="137" align="left" style="padding:5px 5px 5px 0px;">
                  <a class="nav1neu" href="javascript:void(0);">INDEX</a>
               </td>
            </tr>
            <tr>
               <td colspan="3" bgcolor="#cccccc">
                  <img src="cms/images/1.gif" width="100%" height="1px" border="0" alt="">
               </td>
            </tr>
            <tr>
               <td valign="top" style="padding:5px 0px 5px 4px;" width="10px">
                  <img src="cms/images/3.gif" width="10px" height="14px" border="0"
                  alt="">
               </td>
               <td colspan="2" align="left" style="padding:5px 5px 5px 0px;" width="137px">
                  <a class="nav1neu" href="javascript:void(0);">INDEX</a>
               </td>
            </tr>
            <tr>
               <td colspan="3" bgcolor="#cccccc">
                  <img src="cms/images/1.gif" width="100%" height="1px" border="0" alt="">
               </td>
            </tr>
            <tr>
               <td valign="top" style="padding:5px 0px 5px 4px;" width="10px">
                  <img src="cms/images/3.gif" width="10px" height="14px" border="0"
                  alt="">
               </td>
               <td colspan="2" align="left" style="padding:5px 5px 5px 0px;" width="137px">
                  <a class="nav1neu" href="javascript:void(0);">INDEX</a>
               </td>
            </tr>
            <tr>
               <td colspan="3" bgcolor="#cccccc">
                  <img src="cms/images/1.gif" width="100%" height="1px" border="0" alt="">
               </td>
            </tr>
            <tr>
               <td valign="top" style="padding:5px 0px 5px 4px;" width="10px">
                  <img src="cms/images/3.gif" width="10px" height="14px" border="0"
                  alt="">
               </td>
               <td colspan="2" align="left" style="padding:5px 5px 5px 0px;" width="137px">
                  <a class="nav1neu" href="javascript:void(0);">INDEX</a>
               </td>
            </tr>
            <tr>
               <td colspan="3" bgcolor="#cccccc">
                  <img src="cms/images/1.gif" width="100%" height="1px" border="0" alt="">
               </td>
            </tr>
            <tr>
               <td valign="top" style="padding:5px 0px 5px 4px;" width="10px">
                  <img src="cms/images/3.gif" width="10px" height="14px" border="0"
                  alt="">
               </td>
               <td colspan="2" align="left" style="padding:5px 5px 5px 0px;" width="137px">
                  <a class="nav1neu" href="javascript:void(0);">INDEX</a>
               </td>
            </tr>
            <tr>
               <td colspan="3" bgcolor="#cccccc">
                  <img src="cms/images/1.gif" width="100%" height="1px" border="0" alt="">
               </td>
            </tr>
            <tr>
               <td valign="top" style="padding:5px 0px 5px 4px;" width="10px">
                  <img src="cms/images/3.gif" width="10px" height="14px" border="0"
                  alt="">
               </td>
               <td colspan="2" align="left" style="padding:5px 5px 5px 0px;" width="137px">
                  <a class="nav1neu" href="javascript:void(0);">INDEX</a>
               </td>
            </tr>
            <tr>
               <td colspan="3" bgcolor="#cccccc">
                  <img src="cms/images/1.gif" width="100%" height="1px" border="0" alt="">
               </td>
            </tr>
            <tr>
               <td valign="top" style="padding:5px 0px 5px 4px;" width="10px">
                  <img src="cms/images/3.gif" width="10px" height="14px" border="0"
                  alt="">
               </td>
               <td colspan="2" align="left" style="padding:5px 5px 5px 0px;" width="137px">
                  <a class="nav1neu" href="javascript:void(0);">INDEX</a>
               </td>
            </tr>
            <tr>
               <td colspan="3" bgcolor="#cccccc">
                  <img src="cms/images/1.gif" width="100%" height="1px" border="0" alt="">
               </td>
            </tr>
            <tr>
               <td valign="top" style="padding:5px 0px 5px 4px;" width="10px">
                  <img src="cms/images/3.gif" width="10px" height="14px" border="0"
                  alt="">
               </td>
               <td colspan="2" align="left" style="padding:5px 5px 5px 0px;" width="137px">
                  <a class="nav1neu" href="javascript:void(0);">INDEX</a>
               </td>
            </tr>
            <tr>
               <td colspan="3" bgcolor="#cccccc">
                  <img src="cms/images/1.gif" width="100%" height="1px" border="0" alt="">
               </td>
            </tr>
            <tr>
               <td valign="top" style="padding:5px 0px 5px 4px;" width="10px">
                  <img src="cms/images/3.gif" width="10px" height="14px" border="0"
                  alt="">
               </td>
               <td colspan="2" align="left" style="padding:5px 5px 5px 0px;" width="137px">
                  <a class="nav1neu" href="javascript:void(0);">INDEX</a>
               </td>
            </tr>
            <tr>
               <td colspan="3" bgcolor="#cccccc">
                  <img src="cms/images/1.gif" width="100%" height="1px" border="0" alt="">
               </td>
            </tr>
            <tr>
               <td valign="top" style="padding:5px 0px 5px 4px;" width="10px">
                  <img src="cms/images/3.gif" width="10px" height="14px" border="0"
                  alt="">
               </td>
               <td colspan="2" align="left" style="padding:5px 5px 5px 0px;" width="137px">
                  <a class="nav1neu" href="javascript:void(0);">INDEX</a>
               </td>
            </tr>
            <tr>
               <td colspan="3" bgcolor="#cccccc">
                  <img src="cms/images/1.gif" width="100%" height="1px" border="0" alt="">
               </td>
            </tr>
            <tr>
               <td valign="top" style="padding:5px 0px 5px 4px;" width="10px">
                  <img src="cms/images/3.gif" width="10px" height="14px" border="0"
                  alt="">
               </td>
               <td colspan="2" align="left" style="padding:5px 5px 5px 0px;" width="137px">
                  <a class="nav1neu" href="javascript:void(0);">INDEX</a>
               </td>
            </tr>
            <tr>
               <td colspan="3" bgcolor="#cccccc">
                  <img src="cms/images/1.gif" width="100%" height="1px" border="0" alt="">
               </td>
            </tr>
            <tr>
               <td valign="top" style="padding:5px 0px 5px 4px;" width="10px">
                  <img src="cms/images/3.gif" width="10px" height="14px" border="0"
                  alt="">
               </td>
               <td colspan="2" align="left" style="padding:5px 5px 5px 0px;" width="137px">
                  <a class="nav1neu" href="javascript:void(0);">INDEX</a>
               </td>
            </tr>
            <tr>
               <td colspan="3" bgcolor="#cccccc">
                  <img src="cms/images/1.gif" width="100%" height="1px" border="0" alt="">
               </td>
            </tr>
            <tr>
               <td valign="top" style="padding:5px 0px 5px 4px;" width="10px">
                  <img src="cms/images/3.gif" width="10px" height="14px" border="0"
                  alt="">
               </td>
               <td colspan="2" align="left" style="padding:5px 5px 5px 0px;" width="137px">
                  <a class="nav1neu" href="javascript:void(0);">INDEX</a>
               </td>
            </tr>
            <tr>
               <td colspan="3" bgcolor="#cccccc">
                  <img src="cms/images/1.gif" width="100%" height="1px" border="0" alt="">
               </td>
            </tr>
         </table>
      </td>
   </tr>
   <tr>
      <td width="155px" colspan="2">
         <img src="cms/images/1.gif" width="155" height="6" border="0" alt="">
      </td>
   </tr>
</table>
</body>
</html>

Причина именно в этих блоках:

<tr>
  <td valign="top" style="padding:5px 0px 5px 4px;" width="10px">
    <img src="cms/images/3.gif" width="10px" height="14px" border="0" alt="">
  </td>
  <td colspan="2" align="left" style="padding:5px 5px 5px 0px;" width="137px">
    <a class="nav1neu" href="javascript:void(0);">INDEX</a>
  </td>
</tr>

Если же сделать вот так то IE отображает коректно:

<tr>
  <td valign="top" style="padding:5px 0px 5px 4px;" width="10px"><img src="cms/images/3.gif" width="10px" height="14px" border="0" alt=""></td>
  <td colspan="2" align="left" style="padding:5px 5px 5px 0px;" width="137px"><a class="nav1neu" href="javascript:void(0);">INDEX</a></td>
</tr>

Почему так ?

Deff · #5 (**permalink**) 20.06.2012, 10:42

lamer,
А можно чуть пояснить назначения строчных тегов td? (каждого из них - имхо может достаточно менее ?

<tr>
  <td valign="top" style="padding:5px 0px 5px 4px;" width="10px">
    <img src="cms/images/3.gif" width="10px" height="14px" border="0" alt="">
  </td>
  <td colspan="2" align="left" style="padding:5px 5px 5px 0px;" width="137px">
    <a class="nav1neu" href="javascript:void(0);">INDEX</a>
  </td>
</tr>

Ксать это тож глючит в Ие ? http://hostjs-mybb2011.narod.ru/dlyaLamer.htm

lamer · #6 (**permalink**) 20.06.2012, 18:17

Сообщение от Deff

lamer,
А можно чуть пояснить назначения строчных тегов td? (каждого из них - имхо может достаточно менее ?

<tr>
  <td valign="top" style="padding:5px 0px 5px 4px;" width="10px">
    <img src="cms/images/3.gif" width="10px" height="14px" border="0" alt="">
  </td>
  <td colspan="2" align="left" style="padding:5px 5px 5px 0px;" width="137px">
    <a class="nav1neu" href="javascript:void(0);">INDEX</a>
  </td>
</tr>

Ксать это тож глючит в Ие ? http://hostjs-mybb2011.narod.ru/dlyaLamer.htm

Эти таблицы с шаблонов, я их не писал, просто верстал и переделывал шаблон, хотел чтоб код красивее выглядел, выравнял его и вот такая штука вышла корявая.

Ваш пример тоже криво вижу:

А вот если просматриваю свой код который я на форуме разместил то в IE он хорошо отображается, не чего не понимаю

Deff · #7 (**permalink**) 20.06.2012, 20:05

Сообщение от lamer

Ваш пример тоже криво вижу:

Криво вы видите - посколь адреса картинок обрезанные и не отображаются

lamer · #8 (**permalink**) 20.06.2012, 20:34

Сообщение от Deff

Криво вы видите - посколь адреса картинок обрезанные и не отображаются

Даже когда адреса полные эффект такой же.
Да и в FF то все нормально отображается.

Deff · #9 (**permalink**) 20.06.2012, 20:53

lamer,
Перезалейте картинки сюда => http://uploads.ru/ (можно сразу группой) по первой и удерживая шифт по последней и итоговый скриншот -как надо

lamer · #10 (**permalink**) 21.06.2012, 05:25

Сообщение от Deff

lamer,
Перезалейте картинки сюда => http://uploads.ru/ (можно сразу группой) по первой и удерживая шифт по последней и итоговый скриншот -как надо

http://s1.uploads.ru/i/j/y/0/jy0Bd.jpg
http://s1.uploads.ru/i/f/u/o/fuoQv.jpg

Форум

Справочник

Discord чат

Курсы javascript