2012-05-30 2 views
1

Я обнаружил проблему при попытке создать мой первый шаблон шаблона электронной почты, который, как мне кажется, вызвал код (я так новичок в этом).Outlook, основная проблема gmail (вызванный код)

Это скриншот:

enter image description here

Удивления, почему «блог» и в разделе «врезка» не такой же ширины «табель раздел» выше?

Я использовал код что-то вроде этого:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
    <title>Mail 2</title> 
    <style type="text/css"> 
some style 
    </style> 
    <meta name="robots" content="noindex,nofollow"> 
    <meta property="og:title" content="Mail 2"> 
</head> 
<body width="100%" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" bgcolor="#ffffff"> 
     <!--[if gte mso 9]> 
      <v:background fill="t"> 
       <v:fill type="tile" src="https://lh5.googleusercontent.com/-6styRrYxl3U/T7Sg_Cbww0I/AAAAAAAAAkE/UWVWEJDfSj0/h120/header-bg.png" /> 
      </v:background> 
     <![endif]--> 
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#ffffff"> 
    <tr> 
     <td> 
      <table align="center" width="600"> 
       <tr> 
       <td> 
       This is above table section that shown correct 
       </td> 
       </tr> 
      </table> 

      <table width="600"> 
       <tr> 
       <td width="340" colspan="1" class="blog post"> 
       This is below section that shown not correct as above. Blog post section that looks out of the box. 
       </td> 

       <td width="200" colspan="1" class="blog post"> 
       <table> 
        </tr> 
         <td> 
          Blah blah. This is sidebar section that looks out of the box. 
         </td> 
        </tr> 
       </table> 
       </td> 
       </tr> 
      </table> 
     </td> 
    </tr> 
</table> 
</body> 
</html> 

ответ

0

Если у вас есть только две строки и два столбца, почему делают это так сложно?

<table width="596px" border="0" cellspacing="2" cellpadding="0"> 
    <tr> 
    <td>Content 1</td> 
    <td>Content 2</td> 
    </tr> 
    <tr> 
    <td>Content 3</td> 
    <td>Content 4</td> 
    </tr> 
</table> 

Место любого содержания, которое вы хотите в каждом из «содержательных точек» и выполняемой работы. У вас слишком много td's и tr, лучшая практика - это простота. Я также предложил бы предоставить таблицу шириной 596 пикселей, а не 100%, так как это может вызвать проблемы с отображением определенных почтовых клиентов.

0

Я заметил пару ошибок в вашем коде.

1.) В нижней таблице 2, вы имели </tr> вместо <tr>

2.) Столешница был Совместите центр, но дно не было Align объявить

3.) В нижней таблице, тд ширина составляет до 540, а не заявленных 600

Я считаю, что ошибки, указанные выше, вызывали проблему. Если нет, то я должен был бы немного больше информации в то, что именно находится внутри каждой таблицы, как это может быть размер изображения, дополнительные ошибки в коде внутри вложенных таблиц и т.д.

См фрагмент кода ниже:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 
<html xmlns="http://www.w3.org/1999/xhtml"> 
 
<head> 
 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
 
    <title>Mail 2</title> 
 
    <style type="text/css"> 
 
some style 
 
    </style> 
 
    <meta name="robots" content="noindex,nofollow"> 
 
    <meta property="og:title" content="Mail 2"> 
 
</head> 
 
<body width="100%" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" bgcolor="#ffffff"> 
 
     <!--[if gte mso 9]> 
 
      <v:background fill="t"> 
 
       <v:fill type="tile" src="https://lh5.googleusercontent.com/-6styRrYxl3U/T7Sg_Cbww0I/AAAAAAAAAkE/UWVWEJDfSj0/h120/header-bg.png" /> 
 
      </v:background> 
 
     <![endif]--> 
 
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#ffffff"> 
 
    <tr> 
 
     <td> 
 
      <table align="center" width="600"> 
 
       <tr> 
 
       <td> 
 
       This is above table section that shown correct 
 
       </td> 
 
       </tr> 
 
      </table> 
 

 
      <table align="center" width="600"> 
 
       <tr> 
 
       <td width="340" class="blog post"> 
 
       This is below section that shown not correct as above. Blog post section that looks out of the box. 
 
       </td> 
 

 
       <td width="200" class="blog post"> 
 
       <table> 
 
       <tr> 
 
         <td> 
 
          Blah blah. This is sidebar section that looks out of the box. 
 
         </td> 
 
        </tr> 
 
       </table> 
 
       </td> 
 
       </tr> 
 
      </table> 
 
     </td> 
 
    </tr> 
 
</table> 
 
</body> 
 
</html>

Смежные вопросы