Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Выравнял код, после IE стал криво отображать таблицу. (https://javascript.ru/forum/misc/29220-vyravnyal-kod-posle-ie-stal-krivo-otobrazhat-tablicu.html)

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

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

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

lamer 20.06.2012 10:22
Цитата:
Сообщение от Deff (Сообщение 182666)
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 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 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 20.06.2012 18:17
Цитата:
Сообщение от Deff (Сообщение 182682)
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 20.06.2012 20:05
Цитата:
Сообщение от lamer
Ваш пример тоже криво вижу:
Криво вы видите - посколь адреса картинок обрезанные и не отображаются

lamer 20.06.2012 20:34
Цитата:
Сообщение от Deff (Сообщение 182812)
Криво вы видите - посколь адреса картинок обрезанные и не отображаются
Даже когда адреса полные эффект такой же.
Да и в FF то все нормально отображается.

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

lamer 21.06.2012 05:25
Цитата:
Сообщение от Deff (Сообщение 182819)
lamer,
Перезалейте картинки сюда => http://uploads.ru/ (можно сразу группой) по первой и удерживая шифт по последней и итоговый скриншот -как надо
http://s1.uploads.ru/i/j/y/0/jy0Bd.jpg
http://s1.uploads.ru/i/f/u/o/fuoQv.jpg

Deff 21.06.2012 13:01
lamer,
Да мну про картинки в контесте кода - думаю Ие из за них Да и трансформировать без картинок по упрощенке -сложно


Часовой пояс GMT +3, время: 12:36.