当前位置: 动力学知识库 > 问答 > 编程问答 >

html - Email signature gets messed up on reply

问题描述:

I have a problem with my email signature. It gets messed up when replying in Outlook.

What is happening: When I send an email with the signature from Outlook 2016 (on Mac) to Outlook 2007 (on Windows) it looks good. When replying to that email it still looks good. When replying to that email the signature gets messed up. Screenshot: enter image description here

My code:

<!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" />

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

<title></title>

<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. */

#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;

}

}

</style>

</head>

<body>

<div class="block">

<!-- Start of name, function title and logo -->

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

<tbody>

<tr>

<td 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: 15px; font-weight: bold">Voornaam en Achternaam</span><br/>

<span style="text-align: left; color: #B5987F; font-weight: normal; font-style:italic; font-size: 14px;">Functie titel</span><br/>

</td>

</tr>

<tr>

<td>

<a href="http://www.deleeuwhides.com/"><img src="http://www.deleeuwhides.com/img/logo.png" nosend="1" border="0" style="width:179px; height:111px; padding: 10px 0 5px 0;" alt="De Leeuw Hides logo" title="De Leeuw Hides logo" /></a>

</td>

</tr>

</tbody>

</table>

<!-- End of name, function and logo -->

<table cellpadding="0" cellspacing="0" border="0" width="100%">

<tr>

<td><table cellpadding="0" cellspacing="0" border="0" width="600" 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" 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 -->

<!-- Start of second column -->

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

<tbody>

<tr>

<td width="175" 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 -->

<!-- Start of third column -->

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

<tbody>

<tr>

<td width="175" 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;">T:0031-024-3775233</a> <br/>

<span style="text-decoration:none">F: 0031-024-3779316</span> <br/>

<a style="text-decoration:none; color:#9C1C27;" href="mailto:[email protected]es.nl"><span style="text-decoration:none; color:#9C1C27;">[email protected]</span></a><br/>

<a style="text-decoration:none; color:#9C1C27;" href="http://www.deleeuwhides.com"><span style="text-decoration:none; color:#9C1C27;">www.deleeuwhides.com</span></a>

</td>

</tr>

</tbody>

</table>

<!-- End of third column -->

</td>

</tr>

</table>

<!-- Start of branding identity elements -->

<table cellpadding="0" cellspacing="0" border="0" width="100%" class="fluid-table">

<tr>

<td style="height:3px; width:100%; background-color:#B5987F;">

</td>

</tr>

</table>

<table cellpadding="0" cellspacing="0" border="0" width="100%"class="fluid-table">

<tr>

<td style="height:2px; width:100%; background-color:#fff;">

</td>

</tr>

</table>

<table cellpadding="0" cellspacing="0" border="0" width="100%" class="fluid-table">

<tr>

<td valign="middle" style="height:30px; width:100%; background-color:#9C1C27;"><center><img style="display:block;" src="http://www.deleeuwhides.com/img/slogan-footer.png" alt="slogan"></center>

</td>

</tr>

</table>

<!-- End of branding identity elements-->

</td>

</tr>

</table>

</div>

</body>

</html>

Why is this happening and how can I fix this?

网友答案:

Welll, as they say: "Email is hard".

In general, it is a good practice to inline the CSS styles when doing stuff for emails. I use this tool from Litmus, and they also have a pretty good article about the pitfalls of developing HTML content that looks good for emails (gmail specifically).

网友答案:

I sent your message to me from http://putsmail.com to my Outlook address, replied to my gmail and then replied back to my Outlook and got this:

When I replied back to gmail, it looked fine.

My suggestion is to add valign="top" to your tr and td cells in the table in question. This will force the table cells to align.

`

        <!-- Start of first column --> 

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

              <tr valign="top">
                <td valign="top" width="175" 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 --> 


          <!-- Start of second column -->

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

              <tr valign="top">
                <td valign="top" width="175" 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 --> 



          <!-- Start of third column -->

          <table width="175" align="left" border="0" cellpadding="0" cellspacing="0" class="fluid-table">
            <tbody>
              <tr valign="top">
                 <td valign="top" width="175" 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;">T:0031-024-3775233</a> <br/>
                        <span style="text-decoration:none">F: 0031-024-3779316</span> <br/>
                        <a style="text-decoration:none; color:#9C1C27;" href="mailto:[email protected]"><span style="text-decoration:none; color:#9C1C27;">[email protected]</span></a><br/>
                        <a style="text-decoration:none; color:#9C1C27;" href="http://www.deleeuwhides.com"><span style="text-decoration:none; color:#9C1C27;">www.deleeuwhides.com</span></a>
                    </td>
              </tr>
            </tbody>
          </table>

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


    <!-- Start of branding identity elements -->
    <table cellpadding="0" cellspacing="0" border="0" width="100%"  class="fluid-table">
       <tr>
            <td style="height:3px; width:100%; background-color:#B5987F;">
            </td>
        </tr>
    </table>

    <table cellpadding="0" cellspacing="0" border="0" width="100%"class="fluid-table">
       <tr>
            <td style="height:2px; width:100%; background-color:#fff;">
            </td>
        </tr>
    </table>


        <table cellpadding="0" cellspacing="0" border="0" width="100%" class="fluid-table">
                <tr>
                    <td valign="middle" style="height:30px; width:100%; background-color:#9C1C27;"><center><img style="display:block;" src="http://www.deleeuwhides.com/img/slogan-footer.png" alt="slogan"></center>
                    </td>
               </tr>
        </table>
    <!-- End of branding identity elements-->

  </td>
</tr>

`

分享给朋友:
您可能感兴趣的文章:
随机阅读: