Hi everyone,
I am creating a HTML email template. This one looks good when I see it on Qualtrics but when I want to test it on outlook or gmail, the container is not center.
Here an example :
!
Someone can help me please ?
Page 1 / 1
Post the html.
<table border="0" cellpadding="0" cellspacing="0" class="body" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%; background-color: #f6f6f6;">
<tbody>
<tr>
<td style="font-family: sans-serif; font-size: 14px; vertical-align: top;"> </td>
<td class="container" style="font-family: sans-serif; font-size: 14px; vertical-align: top; display: block; Margin: 0 auto; max-width: 580px; padding: 10px; width: 580px;">
<div class="content" style="box-sizing: border-box; display: block; Margin: 0 auto; max-width: 580px; padding: 10px;">
<div style="text-align: center;"><img height="106" src="https://nexity.co1.qualtrics.com/CP/Graphic.php?IM=IM_3BQfZCpysmqOZzD" style="width: 300px; float: center; height: 106px;" width="300" /></div>
<table align="center" class="main" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%; background: #ffffff; border-radius: 10px;">
<tbody>
<tr>
<td class="wrapper" style="font-family: sans-serif; font-size: 14px; vertical-align: top; box-sizing: border-box; padding: 20px;">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;">
<tbody>
<tr>
<td style="font-family: sans-serif; vertical-align: top;">
<p style="font-size: 14px; font-family: sans-serif; font-weight: normal; margin: 0px 0px 15px;"><span style="font-size:16px;"><span style="font-family:Arial,Helvetica,sans-serif;">Bonjour,</span></span></p>
<p style="font-size: 14px; font-family: sans-serif; font-weight: normal; margin: 0px 0px 15px;"><span style="font-size:16px;"><span style="font-family:Arial,Helvetica,sans-serif;"><strong>Félicitations !</strong> Vous venez de devenir propriétaire et nous vous remercions de votre confiance. Nous savons à quel point c’est un moment important dans votre vie.<br />
</span></span><br />
<span style="font-size:11.0pt"><span style="font-family:Calibri"><span style="font-size:16px;"><span style="font-family:Arial,Helvetica,sans-serif;">Votre satisfaction est au centre de nos préoccupations. C'est pourquoi nous vous proposons de répondre à quelques questions pour améliorer nos services</span></span>.</span></span></p>
<p style="font-size: 14px; font-family: sans-serif; font-weight: normal; margin: 0px 0px 15px; text-align: center;"><strong><span style="font-size:11.0pt"><span style="font-family:Calibri"><span style="font-size:16px;"><span style="font-family:Arial,Helvetica,sans-serif;">Dites-nous tout en moins d'une minute !</span></span></span></span></strong></p>
</td>
</tr>
<tr>
<td align="center">
<table bgcolor="#C52A30" border="0" cellpadding="0" cellspacing="0" class="mb" width="336">
<tbody>
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" draggable="true" width="100%">
<tbody>
<tr>
<td style="line-height:1px;font-size:1px;" width="10"><img alt="" height="10" src="http://nexity.emsecure.net/images/SIP/Template_LDM/ctatopleft.jpg" width="10" /></td>
<td align="right" style="line-height:1px;font-size:1px;"><img alt="" height="10" src="http://nexity.emsecure.net/images/SIP/Template_LDM/ctatopright.jpg" width="10" /></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="center" style="vertical-align:middle;"><strong>${l://SurveyLink?d=<span style="font-family:Arial,Helvetica,sans-serif; font-size:16px; color:#ffffff; text-decoration: none;">Je donne mon avis</span>}</strong></td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td style="line-height:1px;font-size:1px;" width="10"><img alt="" height="10" src="http://nexity.emsecure.net/images/SIP/Template_LDM/ctabottomleft.jpg" width="10" /></td>
<td align="right" style="line-height:1px;font-size:1px;"><img alt="" height="10" src="http://nexity.emsecure.net/images/SIP/Template_LDM/ctabottomright.jpg" width="10" /></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<p style="font-family: sans-serif; font-weight: normal; margin: 0px 0px 15px;"><br />
<span style="font-size: 16px;">Merci de votre participation.</span></p>
<p style="font-family: sans-serif; font-weight: normal; margin: 0px 0px 15px;"><span style="font-size: 16px;">À bientôt,<br />
<span style="color:#c83832;"><strong>L'équipe Nexity</strong></span></span></p>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
<div class="footer" style="clear: both; Margin-top: 10px; text-align: center; width: 100%;">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;">
<tbody>
<tr>
<td class="content-block" style="font-family: sans-serif; vertical-align: top; padding-bottom: 10px; padding-top: 10px; font-size: 12px; color: #999999; text-align: center;"><span style="font-size:11px;"><span class="apple-link" style="color: rgb(153, 153, 153); text-align: center;">Vous recevez cet email car vous êtes un client du groupe Nexity.</span><br />
Vous ne souhaitez plus recevoir d'enquête ?<u> ${l://OptOutLink?d=Se%20d%C3%A9sinscrire}.</u></span></td>
</tr>
<tr>
<td class="content-block powered-by" style="font-family: sans-serif; vertical-align: top; padding-bottom: 10px; padding-top: 10px; font-size: 12px; color: #999999; text-align: left;"><span style="font-size:11px;">NEXITY LOGEMENT - Société par actions simplifiée au capital de 6 561 944 euros - Siège Social : 19 rue de Vienne - TSA 60030 - 75801 PARIS Cedex 08 - SIREN 399 381 821RCS PARIS ; spécialisée dans le secteur des activités des sociétés holding..</span></td>
</tr>
</tbody>
</table>
</div>
<tbody>
<tr>
<td style="font-family: sans-serif; font-size: 14px; vertical-align: top;"> </td>
<td class="container" style="font-family: sans-serif; font-size: 14px; vertical-align: top; display: block; Margin: 0 auto; max-width: 580px; padding: 10px; width: 580px;">
<div class="content" style="box-sizing: border-box; display: block; Margin: 0 auto; max-width: 580px; padding: 10px;">
<div style="text-align: center;"><img height="106" src="https://nexity.co1.qualtrics.com/CP/Graphic.php?IM=IM_3BQfZCpysmqOZzD" style="width: 300px; float: center; height: 106px;" width="300" /></div>
<table align="center" class="main" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%; background: #ffffff; border-radius: 10px;">
<tbody>
<tr>
<td class="wrapper" style="font-family: sans-serif; font-size: 14px; vertical-align: top; box-sizing: border-box; padding: 20px;">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;">
<tbody>
<tr>
<td style="font-family: sans-serif; vertical-align: top;">
<p style="font-size: 14px; font-family: sans-serif; font-weight: normal; margin: 0px 0px 15px;"><span style="font-size:16px;"><span style="font-family:Arial,Helvetica,sans-serif;">Bonjour,</span></span></p>
<p style="font-size: 14px; font-family: sans-serif; font-weight: normal; margin: 0px 0px 15px;"><span style="font-size:16px;"><span style="font-family:Arial,Helvetica,sans-serif;"><strong>Félicitations !</strong> Vous venez de devenir propriétaire et nous vous remercions de votre confiance. Nous savons à quel point c’est un moment important dans votre vie.<br />
</span></span><br />
<span style="font-size:11.0pt"><span style="font-family:Calibri"><span style="font-size:16px;"><span style="font-family:Arial,Helvetica,sans-serif;">Votre satisfaction est au centre de nos préoccupations. C'est pourquoi nous vous proposons de répondre à quelques questions pour améliorer nos services</span></span>.</span></span></p>
<p style="font-size: 14px; font-family: sans-serif; font-weight: normal; margin: 0px 0px 15px; text-align: center;"><strong><span style="font-size:11.0pt"><span style="font-family:Calibri"><span style="font-size:16px;"><span style="font-family:Arial,Helvetica,sans-serif;">Dites-nous tout en moins d'une minute !</span></span></span></span></strong></p>
</td>
</tr>
<tr>
<td align="center">
<table bgcolor="#C52A30" border="0" cellpadding="0" cellspacing="0" class="mb" width="336">
<tbody>
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" draggable="true" width="100%">
<tbody>
<tr>
<td style="line-height:1px;font-size:1px;" width="10"><img alt="" height="10" src="http://nexity.emsecure.net/images/SIP/Template_LDM/ctatopleft.jpg" width="10" /></td>
<td align="right" style="line-height:1px;font-size:1px;"><img alt="" height="10" src="http://nexity.emsecure.net/images/SIP/Template_LDM/ctatopright.jpg" width="10" /></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="center" style="vertical-align:middle;"><strong>${l://SurveyLink?d=<span style="font-family:Arial,Helvetica,sans-serif; font-size:16px; color:#ffffff; text-decoration: none;">Je donne mon avis</span>}</strong></td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td style="line-height:1px;font-size:1px;" width="10"><img alt="" height="10" src="http://nexity.emsecure.net/images/SIP/Template_LDM/ctabottomleft.jpg" width="10" /></td>
<td align="right" style="line-height:1px;font-size:1px;"><img alt="" height="10" src="http://nexity.emsecure.net/images/SIP/Template_LDM/ctabottomright.jpg" width="10" /></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<p style="font-family: sans-serif; font-weight: normal; margin: 0px 0px 15px;"><br />
<span style="font-size: 16px;">Merci de votre participation.</span></p>
<p style="font-family: sans-serif; font-weight: normal; margin: 0px 0px 15px;"><span style="font-size: 16px;">À bientôt,<br />
<span style="color:#c83832;"><strong>L'équipe Nexity</strong></span></span></p>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
<div class="footer" style="clear: both; Margin-top: 10px; text-align: center; width: 100%;">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;">
<tbody>
<tr>
<td class="content-block" style="font-family: sans-serif; vertical-align: top; padding-bottom: 10px; padding-top: 10px; font-size: 12px; color: #999999; text-align: center;"><span style="font-size:11px;"><span class="apple-link" style="color: rgb(153, 153, 153); text-align: center;">Vous recevez cet email car vous êtes un client du groupe Nexity.</span><br />
Vous ne souhaitez plus recevoir d'enquête ?<u> ${l://OptOutLink?d=Se%20d%C3%A9sinscrire}.</u></span></td>
</tr>
<tr>
<td class="content-block powered-by" style="font-family: sans-serif; vertical-align: top; padding-bottom: 10px; padding-top: 10px; font-size: 12px; color: #999999; text-align: left;"><span style="font-size:11px;">NEXITY LOGEMENT - Société par actions simplifiée au capital de 6 561 944 euros - Siège Social : 19 rue de Vienne - TSA 60030 - 75801 PARIS Cedex 08 - SIREN 399 381 821RCS PARIS ; spécialisée dans le secteur des activités des sociétés holding..</span></td>
</tr>
</tbody>
</table>
</div>
> @TomG said:
> Post the html.
Sorry I didn't manage to post it in HTML, it appears whatever i do...
> Post the html.
Sorry I didn't manage to post it in HTML, it appears whatever i do...
> @CamilleWB said:
> > @TomG said:
> > Post the html.
>
> Sorry I didn't manage to post it in HTML, it appears whatever i do...
I can see what your problem is. Email clients typically don't support complex CSS. For best results keep it simple and use inline styles.
> > @TomG said:
> > Post the html.
>
> Sorry I didn't manage to post it in HTML, it appears whatever i do...
I can see what your problem is. Email clients typically don't support complex CSS. For best results keep it simple and use inline styles.
Leave a Reply
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.