2017-02-12 13 views
0

Я сделал подпись электронной почты для клиента, который отлично работает на всем, кроме Gmail. Когда я пытаюсь использовать подпись в Gmail, она как-то центрирует ее. Это только в версии браузера. Когда я просматриваю подпись в почтовом приложении на iPhone, она выглядит хорошо. Когда я отправляю подпись в Gmail, например, Outlook, она тоже выглядит хорошо. Снимок экрана проблемы: click.Центр электронной почты центров электронной почты, когда он не должен

Я понятия не имею, почему это происходит, поэтому я надеюсь, что у кого-то есть ответ для меня. Мой код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title>3-column layout</title> 

</head> 

<style type="text/css"> 
/* Client-specific Styles */ 

#outlook a { 
padding: 0; 
} /* Force Outlook to provide a "view in browser" menu link. */ 
body { 
width: 100% !important; 
-webkit-text-size-adjust: 100%; 
-ms-text-size-adjust: 100%; 
margin: 0; 
padding: 0; 
} 
/* Prevent Webkit and Windows Mobile platforms from changing default font sizes, while not breaking desktop design. */ 
.ExternalClass { 
width: 100%; 
} /* Force Hotmail to display emails at full width */ 
    .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font,    .ExternalClass td, .ExternalClass div { 
    line-height: 100%; 
    } /* Force Hotmail to display normal line spacing. More on that:  http://www.emailonacid.com/forum/viewthread/43/ */ 
#backgroundTable { 
margin: 0; 
padding: 0; 
width: 100% !important; 
line-height: 100% !important; 
} 
img { 
outline: none; 
text-decoration: none; 
border: none; 
-ms-interpolation-mode: bicubic; 
} 
a img { 
border: none; 
} 
.image_fix { 
display: block; 
} 
p { 
margin: 0px 0px !important; 
} 
table td { 
border-collapse: collapse; 
} 
table { 
border-collapse: collapse; 
mso-table-lspace: 0pt; 
mso-table-rspace: 0pt; 
} 

/*##############################################*/ 
/*IPHONE STYLES*/ 
/*##############################################*/ 
@media only screen and (max-width: 480px) { 
table { 
position: relative; 
} 

table[class="fluid-table"], td[class="fluid-cell"]{ 
width: 100% !important; 
padding: 0 20px 0 20px!important; 

} 

} 
</style> 

<body style="padding:0; margin:0"> 
<!-- 
/*##############################################*/ 

3 column 

/*##############################################*/ 
--> 


<table align="left" border="0" cellpadding="0" cellspacing="0" class="fluid-table"> 
<tbody> 

    <tr> 
    <td align="left" style="display:block; border:none; outline:none; text-decoration:none; color:#000; font-size:14px; text-align:left; font-family: Open Sans, Arial, Verdana, sans-serif;" border="0"> 
      <span style="text-align: left; color: #9C1C27;font-size: 14px; font-weight: bold">Voornaam en Achternaam</span><br> 
      <span style="text-align: left; margin-top: 0px; margin-bottom: 0px; color: #B5987F; font-weight: normal; font-style:italic; font-size: 12px;">Functie titel</span><br> 
    </td> 
    </tr> 

<tr> 
    <td valign="top" style="padding-left: 0px; padding-top: 7px; padding-bottom: 10px; padding-right: 0px; width:100%; height:100%;"> 
     <a href="http://www.deleeuwhides.com/"><img src="http://www.deleeuwhides.com/img/logo.png" nosend="1" border="0" style="width:179px; height:111px;" alt="De Leeuw Hides logo" title="De Leeuw Hides logo"></a> 
    </td> 
    </tr> 
    </tbody> 
</table> 

<div class="block"> 
    <table cellpadding="0" cellspacing="0" border="0" width="100%" align="left"> 
<tr> 
    <td><table cellpadding="0" cellspacing="0" border="0" width="600" align="left" class="fluid-table"> 
     <tr> 

     <!-- Start of first column --> 

     <td><table width="175" align="left" border="0" cellpadding="0" cellspacing="0" class="fluid-table"> 
      <tbody> 

       <tr> 
       <td width="175" align="left" style=" border:none; text-decoration:none; color:#B5987F; font-size:14px; text-align:left; font-family: Open Sans, Arial, Verdana, sans-serif;" border="0"> 
        <strong style="color:#9C1C27;">Location Nijmegen</strong><br> 
        Lindenhoutseweg 69<br> 
        6545 AH Nijmegen <br> 
        The Netherlands 
       </td> 
       </tr> 

      </tbody> 
      </table> 

      <!-- End of first column --> 

      <!--[if mso]></td><td valign="top"><![endif]--> 

      <!-- Start of second column --> 

      <table width="175" align="left" border="0" cellpadding="0" cellspacing="0" class="fluid-table"> 
      <tbody> 

       <tr> 
       <td width="175" align="left" style="border:none; text-decoration:none; color:#B5987F; font-size:14px; text-align:left; font-family: Open Sans, Arial, Verdana, sans-serif;" border="0"> 
        <strong style="color:#9C1C27;">Location Winterswijk</strong><br> 
        Industrieweg 2a<br> 
        7102 DZ Winterswijk<br> 
        The Netherlands 
       </td> 
       </tr> 
      </tbody> 
      </table> 

      <!-- End of second column --> 

      <!--[if mso]></td><td valign="top"><![endif]--> 

      <!-- Start of third column --> 

      <table width="175" align="left" border="0" cellpadding="0" cellspacing="0" class="fluid-table"> 
      <tbody> 
       <tr> 
       <td width="175" align="left" style="border:none; text-decoration:none; color:#B5987F; font-size:14px; text-align:left; font-family: Open Sans, Arial, Verdana, sans-serif;" border="0"> 
         <a href="tel:0031-024-3775233" style="color:#B5987F;"><font>T:</font> 0031-024-3775233</a> <br> 
         F: 0031-024-3779316 <br> 
         <a style="text-decoration:none; color:#9C1C27;" href="mailto:[email protected]">[email protected]</a><br> 
         <a style="text-decoration:none; color:#9C1C27;" href="http://www.deleeuwhides.com">www.deleeuwhides.com</a> 
        </td> 
       </tr> 
      </tbody> 
      </table> 

      <!-- End of third column --></td> 
     </tr> 
    </table> 

    <table cellpadding="0" cellspacing="0" border="0" width="100%" align="left" style="margin-top:5px; margin-bottom:3px;" class="fluid-table"> 
     <tr> 
      <td style="padding: 0 0 2px 0; height:1px; width:100%; background-color:#B5987F;"> 
      </td> 
     </tr> 
    </table> 

     <table cellpadding="0" cellspacing="0" border="0" width="100%" align="left" class="fluid-table"> 
       <tr> 
        <td valign="top"bgcolor="#9C1C27" style="height:30px; width:100%; background-color:#9C1C27;"><img style="display:block; margin:auto; padding:8px 0 0 0;" src="http://www.deleeuwhides.com/img/slogan-footer.png" alt="slogan"> 
        </td> 
       </tr> 
     </table> 



    </td> 
</tr> 
</table> 

</div> 
</body> 
</html> 

Заранее благодарен!

ответ

0

Как-то я исправил это, начав строить строку кода для строки в новом .html документе. Проверять его каждый раз в Gmail до тех пор, пока центрирование не повторится, но этого никогда не было. Так что теперь он работает так, как должен!

0

Вы пробовали поплавок в вашем внешнем столе, который имеет класс флюидных столов?

Если это не исправить, дайте снимок снизу и дайте мне знать, если он будет работать.

<table width="100%" border="0" cellspacing="0" cellpadding="0"> 
    <tbody> 
    <tr> 
     <td style="width:100%; max-width:600px;">[signature content here]</td> 
     <td>&nbsp;</td> 
    </tr> 
    </tbody> 
</table> 

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

Cheers

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