why my display change between html and newsletter?

i'am a begginer in newsletter. So i have an issue with display. In my dreamweaver code the display is correct. But once i send it at Gmail for example i have a natural padding between span

i've put padding and margin to resolve this but nothing work. The display is correct only when i click at the mirror's link.

Can you explain to me why please ?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="format-detection" content="telephone=yes">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1.0">
<meta name="x-apple-disable-message-reformatting">
<title>BLACK FRIDAY AUX CERCLES DE LA FORME</title>
<style type="text/css">
* 
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;

 @import url('https://fonts.googleapis.com/css?family=Anton');
.fab 
	color: #e52121;
	margin: 0 5px;
	font-family: "Font Awesome 5 Brands";

body 
	-webkit-print-color-adjust: exact;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;

/*.row margin: 0 auto; */
.white 
	color: #ffffff !important;

.white a 
	color: #ffffff !important;

td 
	font-family: Arial, Helvetica, sans-serif;

a:hover 
	color: #000000;

a:visited 
	color: #000000;

a[x-apple-data-detectors] 
	color: inherit !important;
	text-decoration: none !important;
	font-size: inherit !important;
	font-family: inherit !important;
	font-weight: inherit !important;
	line-height: inherit !important;

</style>
<style media="print" type="text/css">
a[x-apple-data-detectors] 
	color: inherit !important;
	text-decoration: none !important;
	font-size: inherit !important;
	font-family: inherit !important;
	font-weight: inherit !important;
	line-height: inherit !important;

h3 
	margin: 0;

/*table responsive */
	
/* Table Base */

.table 
	width: 100%;

.table th, .table td 
	font-weight: normal;
	font-size: 12px;
	/*padding: 8px 15px;*/
	line-height: 20px;
	vertical-align: middle;/*border-top: 1px solid #dddddd;*/

.table thead th 
	background: #eeeeee;
	vertical-align: bottom;

.table tbody > tr:nth-child(odd) > td, .table tbody > tr:nth-child(odd) > th 
	background-color: #fafafa;

.table .t-small 
	width: 5%;

.table .t-medium 
	width: 15%;

.table .t-status 
	font-weight: bold;

.table .t-active 
	color: #46a546;

.table .t-inactive 
	color: #e00300;

.table .t-draft 
	color: #f89406;

.table .t-scheduled 
	color: #049cdb;

span 
	margin: 0;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";


/* Small Sizes */
@media (max-width: 480px) 
.table-action thead 
	display: none;

.table-action tr 
	border-bottom: 0.8px solid #dddddd;

.table-action td 
	border: 0;

.table-action td:not(:first-child) 
	display: block;


</style>
<link href="https://fonts.googleapis.com/css?family=Anton" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
</head>
<body style="margin: 0; padding: 0;" bgcolor="#e0e0e0">
<table width="100%" cellspacing="0" cellpadding="0" border="0" bgcolor="#e0e0e0" style="margin-top: 20px;">
 <tbody>
 <tr>
 <td width="600" align="center"><!-- Visually Hidden Preheader Text : BEGIN -->
 
 <div style="display:none;font-size:1px;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;mso-hide:all;font-family: sans-serif;"> Jusqu'au 30 novembre 2018 1 mois suppl&eacute;mentaire aux Cercles de la Forme à l'occasion du Black Friday. </div>
 
 <!-- Visually Hidden Preheader Text : END -->
 
 <div class="edit" style="position: relative;">
 <table class="fullWidth" width="600" cellspacing="0" cellpadding="0" border="0" bgcolor="#181818" align="center" style="padding: 15px;">
 <tbody>
 <tr>
 <td style="width: 50%" align="center"><a href="https://www.cerclesdelaforme.com/" target="_blank"><img src="http://img.mailinblue.com/2107629/images/5be3fa386d31f_1541667384.png" style="display: block;" alt="cdf" class="fullWidth" width="243" height="auto" border="0"></a></td>
 </tr>
 </tbody>
 </table>
 </div>
 <div class="edit" style="position: relative;">
 <table class="fullWidth" width="600" cellspacing="0" cellpadding="0" border="0" bgcolor="#181818" align="center">
 <tbody>
 <tr height="100">
 <td align="center"><img src="http://img.mailinblue.com/2107629/images/5bed56bbef5ff_1542280891.jpg" alt="bf"/></td>
 </tr>
 </tbody>
 </table>
 </div>
 <table class="fullWidth" width="600" cellspacing="0" cellpadding="0" border="0" bgcolor="#181818">
 <tbody>
 <tr>
 <td>&nbsp;</td>
 </tr>
 <tr>
 <td align="center"><span style="color: #ffff00;font-size: 3rem;font-weight: bold;font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif';margin: -20px;">1 MOIS DE SPORT</span></td>
 </tr>
 <tr>
 <td align="center"><span style="color: #ffff00;font-size: 4rem;font-weight: bolder;font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif';margin: -20px;">OFFERT</span></td>
 </tr>
 <tr>
 <td align="center"><span style="color: #ffff00;font-size: 1.8rem;font-weight: bold;font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif';margin: -20px;">1 an = 13 mois</span></td>
 </tr>
 <tr>
 <td>&nbsp;</td>
 </tr>
 <tr>
 <td align="center" style="padding:0 40px"><p> <span style="color: whitesmoke;font-size: 1rem;font-weight: bold;">Pour toute contremarque valid&eacute;e à l'accueil d'un de nos clubs sur pr&eacute;sentation de cet email, <span style="color: #ffff00;">jusqu'au 30 novembre 2018.</span> </span> </p></td>
 </tr>
 <tr>
 <td>&nbsp;</td>
 </tr>
 <tr>
 <td>&nbsp;</td>
 </tr>
 <tr>
 <td><!-- TABLE -->
 
 <table width="600" style="font-size: 13px;padding: 0px;">
 <tbody>
 <tr align="center">
 <td>&nbsp;</td>
 <td style="font-size: 15px;font-weight: bold;text-transform: uppercase;" align="center"><span style="background-color: #ffff00;padding: 10px;"><a href="https://www.cerclesdelaforme.com/clubs-de-sport-fitness/" style="color: #181818; font-family:Arial, Helvetica, sans-serif; text-decoration:none; text-align:center;color:black;">VOIR NOS CLUBS</a></span></td>
 <td>&nbsp;</td>
 </tr>
 <tr>
 <td>&nbsp;</td>
 </tr>
 <tr>
 <td>&nbsp;</td>
 </tr>
 </tbody>
 </table>
 
 <!-- END TABLE --></td>
 </tr>
 <tr>
 <td>&nbsp;</td>
 </tr>
 </tbody>
 </table>
 <div class="edit" style="position: relative;">
 <table class="fullWidth" width="600" cellspacing="0" cellpadding="0" border="0" bgcolor="#ffffff" align="center">
 <tbody>
 <tr>
 <td><table class="fullWidth" width="562" cellspacing="0" cellpadding="0" border="0" align="center">
 <tbody>
 <tr>
 <td align="center" style="line-height: 15px;font-size: 14px;padding: 10px;" height="15"><strong>2800</strong> cours par semaine - <strong>90</strong> activit&eacute;s - <strong>27</strong> clubs à Paris - <strong style="color: #E21518;">Premier r&eacute;seau parisien </strong></td>
 </tr>
 </tbody>
 </table></td>
 </tr>
 <tr>
 <td><div style="padding:20px;font-family:Arial;font-size:18px;line-height:1;text-align:center;"><a href="https://www.facebook.com/cerclesdelaforme/?utm_source=newsletter&amp;utm_medium=email&amp;utm_campaign=reabo"><em class="fab fa-facebook-f fa-2x"></em></a> <a href="https://twitter.com/cerclesdelaform"><em class="fab fa-twitter fa-2x"></em></a> <a href="https://www.youtube.com/user/CerclesdelaformeTV/?utm_source=newsletter&amp;utm_medium=email&amp;utm_campaign=reabo"><em class="fab fa-youtube fa-2x"></em></a> <a href="https://www.pinterest.fr/cerclesdelaform/?utm_source=newsletter&amp;utm_medium=email&amp;utm_campaign=reabo"><em class="fab fa-pinterest-p fa-2x"></em></a> <a href="https://www.instagram.com/cerclesdelaforme/"><em class="fab fa-instagram fa-2x"></em></a></div></td>
 </tr>
 </tbody>
 </table>
 </div></td>
 </tr>
 </tbody>
</table>
</body>
</html>

edited Nov 15 '18 at 14:00

asked Nov 15 '18 at 13:49

Rabah

347

add a comment |

i'am a begginer in newsletter. So i have an issue with display. In my dreamweaver code the display is correct. But once i send it at Gmail for example i have a natural padding between span

i've put padding and margin to resolve this but nothing work. The display is correct only when i click at the mirror's link.

Can you explain to me why please ?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="format-detection" content="telephone=yes">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1.0">
<meta name="x-apple-disable-message-reformatting">
<title>BLACK FRIDAY AUX CERCLES DE LA FORME</title>
<style type="text/css">
* 
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;

 @import url('https://fonts.googleapis.com/css?family=Anton');
.fab 
	color: #e52121;
	margin: 0 5px;
	font-family: "Font Awesome 5 Brands";

body 
	-webkit-print-color-adjust: exact;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;

/*.row margin: 0 auto; */
.white 
	color: #ffffff !important;

.white a 
	color: #ffffff !important;

td 
	font-family: Arial, Helvetica, sans-serif;

a:hover 
	color: #000000;

a:visited 
	color: #000000;

a[x-apple-data-detectors] 
	color: inherit !important;
	text-decoration: none !important;
	font-size: inherit !important;
	font-family: inherit !important;
	font-weight: inherit !important;
	line-height: inherit !important;

</style>
<style media="print" type="text/css">
a[x-apple-data-detectors] 
	color: inherit !important;
	text-decoration: none !important;
	font-size: inherit !important;
	font-family: inherit !important;
	font-weight: inherit !important;
	line-height: inherit !important;

h3 
	margin: 0;

/*table responsive */
	
/* Table Base */

.table 
	width: 100%;

.table th, .table td 
	font-weight: normal;
	font-size: 12px;
	/*padding: 8px 15px;*/
	line-height: 20px;
	vertical-align: middle;/*border-top: 1px solid #dddddd;*/

.table thead th 
	background: #eeeeee;
	vertical-align: bottom;

.table tbody > tr:nth-child(odd) > td, .table tbody > tr:nth-child(odd) > th 
	background-color: #fafafa;

.table .t-small 
	width: 5%;

.table .t-medium 
	width: 15%;

.table .t-status 
	font-weight: bold;

.table .t-active 
	color: #46a546;

.table .t-inactive 
	color: #e00300;

.table .t-draft 
	color: #f89406;

.table .t-scheduled 
	color: #049cdb;

span 
	margin: 0;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";


/* Small Sizes */
@media (max-width: 480px) 
.table-action thead 
	display: none;

.table-action tr 
	border-bottom: 0.8px solid #dddddd;

.table-action td 
	border: 0;

.table-action td:not(:first-child) 
	display: block;


</style>
<link href="https://fonts.googleapis.com/css?family=Anton" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
</head>
<body style="margin: 0; padding: 0;" bgcolor="#e0e0e0">
<table width="100%" cellspacing="0" cellpadding="0" border="0" bgcolor="#e0e0e0" style="margin-top: 20px;">
 <tbody>
 <tr>
 <td width="600" align="center"><!-- Visually Hidden Preheader Text : BEGIN -->
 
 <div style="display:none;font-size:1px;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;mso-hide:all;font-family: sans-serif;"> Jusqu'au 30 novembre 2018 1 mois suppl&eacute;mentaire aux Cercles de la Forme à l'occasion du Black Friday. </div>
 
 <!-- Visually Hidden Preheader Text : END -->
 
 <div class="edit" style="position: relative;">
 <table class="fullWidth" width="600" cellspacing="0" cellpadding="0" border="0" bgcolor="#181818" align="center" style="padding: 15px;">
 <tbody>
 <tr>
 <td style="width: 50%" align="center"><a href="https://www.cerclesdelaforme.com/" target="_blank"><img src="http://img.mailinblue.com/2107629/images/5be3fa386d31f_1541667384.png" style="display: block;" alt="cdf" class="fullWidth" width="243" height="auto" border="0"></a></td>
 </tr>
 </tbody>
 </table>
 </div>
 <div class="edit" style="position: relative;">
 <table class="fullWidth" width="600" cellspacing="0" cellpadding="0" border="0" bgcolor="#181818" align="center">
 <tbody>
 <tr height="100">
 <td align="center"><img src="http://img.mailinblue.com/2107629/images/5bed56bbef5ff_1542280891.jpg" alt="bf"/></td>
 </tr>
 </tbody>
 </table>
 </div>
 <table class="fullWidth" width="600" cellspacing="0" cellpadding="0" border="0" bgcolor="#181818">
 <tbody>
 <tr>
 <td>&nbsp;</td>
 </tr>
 <tr>
 <td align="center"><span style="color: #ffff00;font-size: 3rem;font-weight: bold;font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif';margin: -20px;">1 MOIS DE SPORT</span></td>
 </tr>
 <tr>
 <td align="center"><span style="color: #ffff00;font-size: 4rem;font-weight: bolder;font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif';margin: -20px;">OFFERT</span></td>
 </tr>
 <tr>
 <td align="center"><span style="color: #ffff00;font-size: 1.8rem;font-weight: bold;font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif';margin: -20px;">1 an = 13 mois</span></td>
 </tr>
 <tr>
 <td>&nbsp;</td>
 </tr>
 <tr>
 <td align="center" style="padding:0 40px"><p> <span style="color: whitesmoke;font-size: 1rem;font-weight: bold;">Pour toute contremarque valid&eacute;e à l'accueil d'un de nos clubs sur pr&eacute;sentation de cet email, <span style="color: #ffff00;">jusqu'au 30 novembre 2018.</span> </span> </p></td>
 </tr>
 <tr>
 <td>&nbsp;</td>
 </tr>
 <tr>
 <td>&nbsp;</td>
 </tr>
 <tr>
 <td><!-- TABLE -->
 
 <table width="600" style="font-size: 13px;padding: 0px;">
 <tbody>
 <tr align="center">
 <td>&nbsp;</td>
 <td style="font-size: 15px;font-weight: bold;text-transform: uppercase;" align="center"><span style="background-color: #ffff00;padding: 10px;"><a href="https://www.cerclesdelaforme.com/clubs-de-sport-fitness/" style="color: #181818; font-family:Arial, Helvetica, sans-serif; text-decoration:none; text-align:center;color:black;">VOIR NOS CLUBS</a></span></td>
 <td>&nbsp;</td>
 </tr>
 <tr>
 <td>&nbsp;</td>
 </tr>
 <tr>
 <td>&nbsp;</td>
 </tr>
 </tbody>
 </table>
 
 <!-- END TABLE --></td>
 </tr>
 <tr>
 <td>&nbsp;</td>
 </tr>
 </tbody>
 </table>
 <div class="edit" style="position: relative;">
 <table class="fullWidth" width="600" cellspacing="0" cellpadding="0" border="0" bgcolor="#ffffff" align="center">
 <tbody>
 <tr>
 <td><table class="fullWidth" width="562" cellspacing="0" cellpadding="0" border="0" align="center">
 <tbody>
 <tr>
 <td align="center" style="line-height: 15px;font-size: 14px;padding: 10px;" height="15"><strong>2800</strong> cours par semaine - <strong>90</strong> activit&eacute;s - <strong>27</strong> clubs à Paris - <strong style="color: #E21518;">Premier r&eacute;seau parisien </strong></td>
 </tr>
 </tbody>
 </table></td>
 </tr>
 <tr>
 <td><div style="padding:20px;font-family:Arial;font-size:18px;line-height:1;text-align:center;"><a href="https://www.facebook.com/cerclesdelaforme/?utm_source=newsletter&amp;utm_medium=email&amp;utm_campaign=reabo"><em class="fab fa-facebook-f fa-2x"></em></a> <a href="https://twitter.com/cerclesdelaform"><em class="fab fa-twitter fa-2x"></em></a> <a href="https://www.youtube.com/user/CerclesdelaformeTV/?utm_source=newsletter&amp;utm_medium=email&amp;utm_campaign=reabo"><em class="fab fa-youtube fa-2x"></em></a> <a href="https://www.pinterest.fr/cerclesdelaform/?utm_source=newsletter&amp;utm_medium=email&amp;utm_campaign=reabo"><em class="fab fa-pinterest-p fa-2x"></em></a> <a href="https://www.instagram.com/cerclesdelaforme/"><em class="fab fa-instagram fa-2x"></em></a></div></td>
 </tr>
 </tbody>
 </table>
 </div></td>
 </tr>
 </tbody>
</table>
</body>
</html>

edited Nov 15 '18 at 14:00

asked Nov 15 '18 at 13:49

Rabah

347

add a comment |

i'am a begginer in newsletter. So i have an issue with display. In my dreamweaver code the display is correct. But once i send it at Gmail for example i have a natural padding between span

i've put padding and margin to resolve this but nothing work. The display is correct only when i click at the mirror's link.

Can you explain to me why please ?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="format-detection" content="telephone=yes">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1.0">
<meta name="x-apple-disable-message-reformatting">
<title>BLACK FRIDAY AUX CERCLES DE LA FORME</title>
<style type="text/css">
* 
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;

 @import url('https://fonts.googleapis.com/css?family=Anton');
.fab 
	color: #e52121;
	margin: 0 5px;
	font-family: "Font Awesome 5 Brands";

body 
	-webkit-print-color-adjust: exact;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;

/*.row margin: 0 auto; */
.white 
	color: #ffffff !important;

.white a 
	color: #ffffff !important;

td 
	font-family: Arial, Helvetica, sans-serif;

a:hover 
	color: #000000;

a:visited 
	color: #000000;

a[x-apple-data-detectors] 
	color: inherit !important;
	text-decoration: none !important;
	font-size: inherit !important;
	font-family: inherit !important;
	font-weight: inherit !important;
	line-height: inherit !important;

</style>
<style media="print" type="text/css">
a[x-apple-data-detectors] 
	color: inherit !important;
	text-decoration: none !important;
	font-size: inherit !important;
	font-family: inherit !important;
	font-weight: inherit !important;
	line-height: inherit !important;

h3 
	margin: 0;

/*table responsive */
	
/* Table Base */

.table 
	width: 100%;

.table th, .table td 
	font-weight: normal;
	font-size: 12px;
	/*padding: 8px 15px;*/
	line-height: 20px;
	vertical-align: middle;/*border-top: 1px solid #dddddd;*/

.table thead th 
	background: #eeeeee;
	vertical-align: bottom;

.table tbody > tr:nth-child(odd) > td, .table tbody > tr:nth-child(odd) > th 
	background-color: #fafafa;

.table .t-small 
	width: 5%;

.table .t-medium 
	width: 15%;

.table .t-status 
	font-weight: bold;

.table .t-active 
	color: #46a546;

.table .t-inactive 
	color: #e00300;

.table .t-draft 
	color: #f89406;

.table .t-scheduled 
	color: #049cdb;

span 
	margin: 0;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";


/* Small Sizes */
@media (max-width: 480px) 
.table-action thead 
	display: none;

.table-action tr 
	border-bottom: 0.8px solid #dddddd;

.table-action td 
	border: 0;

.table-action td:not(:first-child) 
	display: block;


</style>
<link href="https://fonts.googleapis.com/css?family=Anton" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
</head>
<body style="margin: 0; padding: 0;" bgcolor="#e0e0e0">
<table width="100%" cellspacing="0" cellpadding="0" border="0" bgcolor="#e0e0e0" style="margin-top: 20px;">
 <tbody>
 <tr>
 <td width="600" align="center"><!-- Visually Hidden Preheader Text : BEGIN -->
 
 <div style="display:none;font-size:1px;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;mso-hide:all;font-family: sans-serif;"> Jusqu'au 30 novembre 2018 1 mois suppl&eacute;mentaire aux Cercles de la Forme à l'occasion du Black Friday. </div>
 
 <!-- Visually Hidden Preheader Text : END -->
 
 <div class="edit" style="position: relative;">
 <table class="fullWidth" width="600" cellspacing="0" cellpadding="0" border="0" bgcolor="#181818" align="center" style="padding: 15px;">
 <tbody>
 <tr>
 <td style="width: 50%" align="center"><a href="https://www.cerclesdelaforme.com/" target="_blank"><img src="http://img.mailinblue.com/2107629/images/5be3fa386d31f_1541667384.png" style="display: block;" alt="cdf" class="fullWidth" width="243" height="auto" border="0"></a></td>
 </tr>
 </tbody>
 </table>
 </div>
 <div class="edit" style="position: relative;">
 <table class="fullWidth" width="600" cellspacing="0" cellpadding="0" border="0" bgcolor="#181818" align="center">
 <tbody>
 <tr height="100">
 <td align="center"><img src="http://img.mailinblue.com/2107629/images/5bed56bbef5ff_1542280891.jpg" alt="bf"/></td>
 </tr>
 </tbody>
 </table>
 </div>
 <table class="fullWidth" width="600" cellspacing="0" cellpadding="0" border="0" bgcolor="#181818">
 <tbody>
 <tr>
 <td>&nbsp;</td>
 </tr>
 <tr>
 <td align="center"><span style="color: #ffff00;font-size: 3rem;font-weight: bold;font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif';margin: -20px;">1 MOIS DE SPORT</span></td>
 </tr>
 <tr>
 <td align="center"><span style="color: #ffff00;font-size: 4rem;font-weight: bolder;font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif';margin: -20px;">OFFERT</span></td>
 </tr>
 <tr>
 <td align="center"><span style="color: #ffff00;font-size: 1.8rem;font-weight: bold;font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif';margin: -20px;">1 an = 13 mois</span></td>
 </tr>
 <tr>
 <td>&nbsp;</td>
 </tr>
 <tr>
 <td align="center" style="padding:0 40px"><p> <span style="color: whitesmoke;font-size: 1rem;font-weight: bold;">Pour toute contremarque valid&eacute;e à l'accueil d'un de nos clubs sur pr&eacute;sentation de cet email, <span style="color: #ffff00;">jusqu'au 30 novembre 2018.</span> </span> </p></td>
 </tr>
 <tr>
 <td>&nbsp;</td>
 </tr>
 <tr>
 <td>&nbsp;</td>
 </tr>
 <tr>
 <td><!-- TABLE -->
 
 <table width="600" style="font-size: 13px;padding: 0px;">
 <tbody>
 <tr align="center">
 <td>&nbsp;</td>
 <td style="font-size: 15px;font-weight: bold;text-transform: uppercase;" align="center"><span style="background-color: #ffff00;padding: 10px;"><a href="https://www.cerclesdelaforme.com/clubs-de-sport-fitness/" style="color: #181818; font-family:Arial, Helvetica, sans-serif; text-decoration:none; text-align:center;color:black;">VOIR NOS CLUBS</a></span></td>
 <td>&nbsp;</td>
 </tr>
 <tr>
 <td>&nbsp;</td>
 </tr>
 <tr>
 <td>&nbsp;</td>
 </tr>
 </tbody>
 </table>
 
 <!-- END TABLE --></td>
 </tr>
 <tr>
 <td>&nbsp;</td>
 </tr>
 </tbody>
 </table>
 <div class="edit" style="position: relative;">
 <table class="fullWidth" width="600" cellspacing="0" cellpadding="0" border="0" bgcolor="#ffffff" align="center">
 <tbody>
 <tr>
 <td><table class="fullWidth" width="562" cellspacing="0" cellpadding="0" border="0" align="center">
 <tbody>
 <tr>
 <td align="center" style="line-height: 15px;font-size: 14px;padding: 10px;" height="15"><strong>2800</strong> cours par semaine - <strong>90</strong> activit&eacute;s - <strong>27</strong> clubs à Paris - <strong style="color: #E21518;">Premier r&eacute;seau parisien </strong></td>
 </tr>
 </tbody>
 </table></td>
 </tr>
 <tr>
 <td><div style="padding:20px;font-family:Arial;font-size:18px;line-height:1;text-align:center;"><a href="https://www.facebook.com/cerclesdelaforme/?utm_source=newsletter&amp;utm_medium=email&amp;utm_campaign=reabo"><em class="fab fa-facebook-f fa-2x"></em></a> <a href="https://twitter.com/cerclesdelaform"><em class="fab fa-twitter fa-2x"></em></a> <a href="https://www.youtube.com/user/CerclesdelaformeTV/?utm_source=newsletter&amp;utm_medium=email&amp;utm_campaign=reabo"><em class="fab fa-youtube fa-2x"></em></a> <a href="https://www.pinterest.fr/cerclesdelaform/?utm_source=newsletter&amp;utm_medium=email&amp;utm_campaign=reabo"><em class="fab fa-pinterest-p fa-2x"></em></a> <a href="https://www.instagram.com/cerclesdelaforme/"><em class="fab fa-instagram fa-2x"></em></a></div></td>
 </tr>
 </tbody>
 </table>
 </div></td>
 </tr>
 </tbody>
</table>
</body>
</html>

edited Nov 15 '18 at 14:00

asked Nov 15 '18 at 13:49

Rabah

347

i'am a begginer in newsletter. So i have an issue with display. In my dreamweaver code the display is correct. But once i send it at Gmail for example i have a natural padding between span

i've put padding and margin to resolve this but nothing work. The display is correct only when i click at the mirror's link.

Can you explain to me why please ?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="format-detection" content="telephone=yes">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1.0">
<meta name="x-apple-disable-message-reformatting">
<title>BLACK FRIDAY AUX CERCLES DE LA FORME</title>
<style type="text/css">
* 
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;

 @import url('https://fonts.googleapis.com/css?family=Anton');
.fab 
	color: #e52121;
	margin: 0 5px;
	font-family: "Font Awesome 5 Brands";

body 
	-webkit-print-color-adjust: exact;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;

/*.row margin: 0 auto; */
.white 
	color: #ffffff !important;

.white a 
	color: #ffffff !important;

td 
	font-family: Arial, Helvetica, sans-serif;

a:hover 
	color: #000000;

a:visited 
	color: #000000;

a[x-apple-data-detectors] 
	color: inherit !important;
	text-decoration: none !important;
	font-size: inherit !important;
	font-family: inherit !important;
	font-weight: inherit !important;
	line-height: inherit !important;

</style>
<style media="print" type="text/css">
a[x-apple-data-detectors] 
	color: inherit !important;
	text-decoration: none !important;
	font-size: inherit !important;
	font-family: inherit !important;
	font-weight: inherit !important;
	line-height: inherit !important;

h3 
	margin: 0;

/*table responsive */
	
/* Table Base */

.table 
	width: 100%;

.table th, .table td 
	font-weight: normal;
	font-size: 12px;
	/*padding: 8px 15px;*/
	line-height: 20px;
	vertical-align: middle;/*border-top: 1px solid #dddddd;*/

.table thead th 
	background: #eeeeee;
	vertical-align: bottom;

.table tbody > tr:nth-child(odd) > td, .table tbody > tr:nth-child(odd) > th 
	background-color: #fafafa;

.table .t-small 
	width: 5%;

.table .t-medium 
	width: 15%;

.table .t-status 
	font-weight: bold;

.table .t-active 
	color: #46a546;

.table .t-inactive 
	color: #e00300;

.table .t-draft 
	color: #f89406;

.table .t-scheduled 
	color: #049cdb;

span 
	margin: 0;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";


/* Small Sizes */
@media (max-width: 480px) 
.table-action thead 
	display: none;

.table-action tr 
	border-bottom: 0.8px solid #dddddd;

.table-action td 
	border: 0;

.table-action td:not(:first-child) 
	display: block;


</style>
<link href="https://fonts.googleapis.com/css?family=Anton" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
</head>
<body style="margin: 0; padding: 0;" bgcolor="#e0e0e0">
<table width="100%" cellspacing="0" cellpadding="0" border="0" bgcolor="#e0e0e0" style="margin-top: 20px;">
 <tbody>
 <tr>
 <td width="600" align="center"><!-- Visually Hidden Preheader Text : BEGIN -->
 
 <div style="display:none;font-size:1px;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;mso-hide:all;font-family: sans-serif;"> Jusqu'au 30 novembre 2018 1 mois suppl&eacute;mentaire aux Cercles de la Forme à l'occasion du Black Friday. </div>
 
 <!-- Visually Hidden Preheader Text : END -->
 
 <div class="edit" style="position: relative;">
 <table class="fullWidth" width="600" cellspacing="0" cellpadding="0" border="0" bgcolor="#181818" align="center" style="padding: 15px;">
 <tbody>
 <tr>
 <td style="width: 50%" align="center"><a href="https://www.cerclesdelaforme.com/" target="_blank"><img src="http://img.mailinblue.com/2107629/images/5be3fa386d31f_1541667384.png" style="display: block;" alt="cdf" class="fullWidth" width="243" height="auto" border="0"></a></td>
 </tr>
 </tbody>
 </table>
 </div>
 <div class="edit" style="position: relative;">
 <table class="fullWidth" width="600" cellspacing="0" cellpadding="0" border="0" bgcolor="#181818" align="center">
 <tbody>
 <tr height="100">
 <td align="center"><img src="http://img.mailinblue.com/2107629/images/5bed56bbef5ff_1542280891.jpg" alt="bf"/></td>
 </tr>
 </tbody>
 </table>
 </div>
 <table class="fullWidth" width="600" cellspacing="0" cellpadding="0" border="0" bgcolor="#181818">
 <tbody>
 <tr>
 <td>&nbsp;</td>
 </tr>
 <tr>
 <td align="center"><span style="color: #ffff00;font-size: 3rem;font-weight: bold;font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif';margin: -20px;">1 MOIS DE SPORT</span></td>
 </tr>
 <tr>
 <td align="center"><span style="color: #ffff00;font-size: 4rem;font-weight: bolder;font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif';margin: -20px;">OFFERT</span></td>
 </tr>
 <tr>
 <td align="center"><span style="color: #ffff00;font-size: 1.8rem;font-weight: bold;font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif';margin: -20px;">1 an = 13 mois</span></td>
 </tr>
 <tr>
 <td>&nbsp;</td>
 </tr>
 <tr>
 <td align="center" style="padding:0 40px"><p> <span style="color: whitesmoke;font-size: 1rem;font-weight: bold;">Pour toute contremarque valid&eacute;e à l'accueil d'un de nos clubs sur pr&eacute;sentation de cet email, <span style="color: #ffff00;">jusqu'au 30 novembre 2018.</span> </span> </p></td>
 </tr>
 <tr>
 <td>&nbsp;</td>
 </tr>
 <tr>
 <td>&nbsp;</td>
 </tr>
 <tr>
 <td><!-- TABLE -->
 
 <table width="600" style="font-size: 13px;padding: 0px;">
 <tbody>
 <tr align="center">
 <td>&nbsp;</td>
 <td style="font-size: 15px;font-weight: bold;text-transform: uppercase;" align="center"><span style="background-color: #ffff00;padding: 10px;"><a href="https://www.cerclesdelaforme.com/clubs-de-sport-fitness/" style="color: #181818; font-family:Arial, Helvetica, sans-serif; text-decoration:none; text-align:center;color:black;">VOIR NOS CLUBS</a></span></td>
 <td>&nbsp;</td>
 </tr>
 <tr>
 <td>&nbsp;</td>
 </tr>
 <tr>
 <td>&nbsp;</td>
 </tr>
 </tbody>
 </table>
 
 <!-- END TABLE --></td>
 </tr>
 <tr>
 <td>&nbsp;</td>
 </tr>
 </tbody>
 </table>
 <div class="edit" style="position: relative;">
 <table class="fullWidth" width="600" cellspacing="0" cellpadding="0" border="0" bgcolor="#ffffff" align="center">
 <tbody>
 <tr>
 <td><table class="fullWidth" width="562" cellspacing="0" cellpadding="0" border="0" align="center">
 <tbody>
 <tr>
 <td align="center" style="line-height: 15px;font-size: 14px;padding: 10px;" height="15"><strong>2800</strong> cours par semaine - <strong>90</strong> activit&eacute;s - <strong>27</strong> clubs à Paris - <strong style="color: #E21518;">Premier r&eacute;seau parisien </strong></td>
 </tr>
 </tbody>
 </table></td>
 </tr>
 <tr>
 <td><div style="padding:20px;font-family:Arial;font-size:18px;line-height:1;text-align:center;"><a href="https://www.facebook.com/cerclesdelaforme/?utm_source=newsletter&amp;utm_medium=email&amp;utm_campaign=reabo"><em class="fab fa-facebook-f fa-2x"></em></a> <a href="https://twitter.com/cerclesdelaform"><em class="fab fa-twitter fa-2x"></em></a> <a href="https://www.youtube.com/user/CerclesdelaformeTV/?utm_source=newsletter&amp;utm_medium=email&amp;utm_campaign=reabo"><em class="fab fa-youtube fa-2x"></em></a> <a href="https://www.pinterest.fr/cerclesdelaform/?utm_source=newsletter&amp;utm_medium=email&amp;utm_campaign=reabo"><em class="fab fa-pinterest-p fa-2x"></em></a> <a href="https://www.instagram.com/cerclesdelaforme/"><em class="fab fa-instagram fa-2x"></em></a></div></td>
 </tr>
 </tbody>
 </table>
 </div></td>
 </tr>
 </tbody>
</table>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="format-detection" content="telephone=yes">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1.0">
<meta name="x-apple-disable-message-reformatting">
<title>BLACK FRIDAY AUX CERCLES DE LA FORME</title>
<style type="text/css">
* 
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;

 @import url('https://fonts.googleapis.com/css?family=Anton');
.fab 
	color: #e52121;
	margin: 0 5px;
	font-family: "Font Awesome 5 Brands";

body 
	-webkit-print-color-adjust: exact;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;

/*.row margin: 0 auto; */
.white 
	color: #ffffff !important;

.white a 
	color: #ffffff !important;

td 
	font-family: Arial, Helvetica, sans-serif;

a:hover 
	color: #000000;

a:visited 
	color: #000000;

a[x-apple-data-detectors] 
	color: inherit !important;
	text-decoration: none !important;
	font-size: inherit !important;
	font-family: inherit !important;
	font-weight: inherit !important;
	line-height: inherit !important;

</style>
<style media="print" type="text/css">
a[x-apple-data-detectors] 
	color: inherit !important;
	text-decoration: none !important;
	font-size: inherit !important;
	font-family: inherit !important;
	font-weight: inherit !important;
	line-height: inherit !important;

h3 
	margin: 0;

/*table responsive */
	
/* Table Base */

.table 
	width: 100%;

.table th, .table td 
	font-weight: normal;
	font-size: 12px;
	/*padding: 8px 15px;*/
	line-height: 20px;
	vertical-align: middle;/*border-top: 1px solid #dddddd;*/

.table thead th 
	background: #eeeeee;
	vertical-align: bottom;

.table tbody > tr:nth-child(odd) > td, .table tbody > tr:nth-child(odd) > th 
	background-color: #fafafa;

.table .t-small 
	width: 5%;

.table .t-medium 
	width: 15%;

.table .t-status 
	font-weight: bold;

.table .t-active 
	color: #46a546;

.table .t-inactive 
	color: #e00300;

.table .t-draft 
	color: #f89406;

.table .t-scheduled 
	color: #049cdb;

span 
	margin: 0;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";


/* Small Sizes */
@media (max-width: 480px) 
.table-action thead 
	display: none;

.table-action tr 
	border-bottom: 0.8px solid #dddddd;

.table-action td 
	border: 0;

.table-action td:not(:first-child) 
	display: block;


</style>
<link href="https://fonts.googleapis.com/css?family=Anton" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
</head>
<body style="margin: 0; padding: 0;" bgcolor="#e0e0e0">
<table width="100%" cellspacing="0" cellpadding="0" border="0" bgcolor="#e0e0e0" style="margin-top: 20px;">
 <tbody>
 <tr>
 <td width="600" align="center"><!-- Visually Hidden Preheader Text : BEGIN -->
 
 <div style="display:none;font-size:1px;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;mso-hide:all;font-family: sans-serif;"> Jusqu'au 30 novembre 2018 1 mois suppl&eacute;mentaire aux Cercles de la Forme à l'occasion du Black Friday. </div>
 
 <!-- Visually Hidden Preheader Text : END -->
 
 <div class="edit" style="position: relative;">
 <table class="fullWidth" width="600" cellspacing="0" cellpadding="0" border="0" bgcolor="#181818" align="center" style="padding: 15px;">
 <tbody>
 <tr>
 <td style="width: 50%" align="center"><a href="https://www.cerclesdelaforme.com/" target="_blank"><img src="http://img.mailinblue.com/2107629/images/5be3fa386d31f_1541667384.png" style="display: block;" alt="cdf" class="fullWidth" width="243" height="auto" border="0"></a></td>
 </tr>
 </tbody>
 </table>
 </div>
 <div class="edit" style="position: relative;">
 <table class="fullWidth" width="600" cellspacing="0" cellpadding="0" border="0" bgcolor="#181818" align="center">
 <tbody>
 <tr height="100">
 <td align="center"><img src="http://img.mailinblue.com/2107629/images/5bed56bbef5ff_1542280891.jpg" alt="bf"/></td>
 </tr>
 </tbody>
 </table>
 </div>
 <table class="fullWidth" width="600" cellspacing="0" cellpadding="0" border="0" bgcolor="#181818">
 <tbody>
 <tr>
 <td>&nbsp;</td>
 </tr>
 <tr>
 <td align="center"><span style="color: #ffff00;font-size: 3rem;font-weight: bold;font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif';margin: -20px;">1 MOIS DE SPORT</span></td>
 </tr>
 <tr>
 <td align="center"><span style="color: #ffff00;font-size: 4rem;font-weight: bolder;font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif';margin: -20px;">OFFERT</span></td>
 </tr>
 <tr>
 <td align="center"><span style="color: #ffff00;font-size: 1.8rem;font-weight: bold;font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif';margin: -20px;">1 an = 13 mois</span></td>
 </tr>
 <tr>
 <td>&nbsp;</td>
 </tr>
 <tr>
 <td align="center" style="padding:0 40px"><p> <span style="color: whitesmoke;font-size: 1rem;font-weight: bold;">Pour toute contremarque valid&eacute;e à l'accueil d'un de nos clubs sur pr&eacute;sentation de cet email, <span style="color: #ffff00;">jusqu'au 30 novembre 2018.</span> </span> </p></td>
 </tr>
 <tr>
 <td>&nbsp;</td>
 </tr>
 <tr>
 <td>&nbsp;</td>
 </tr>
 <tr>
 <td><!-- TABLE -->
 
 <table width="600" style="font-size: 13px;padding: 0px;">
 <tbody>
 <tr align="center">
 <td>&nbsp;</td>
 <td style="font-size: 15px;font-weight: bold;text-transform: uppercase;" align="center"><span style="background-color: #ffff00;padding: 10px;"><a href="https://www.cerclesdelaforme.com/clubs-de-sport-fitness/" style="color: #181818; font-family:Arial, Helvetica, sans-serif; text-decoration:none; text-align:center;color:black;">VOIR NOS CLUBS</a></span></td>
 <td>&nbsp;</td>
 </tr>
 <tr>
 <td>&nbsp;</td>
 </tr>
 <tr>
 <td>&nbsp;</td>
 </tr>
 </tbody>
 </table>
 
 <!-- END TABLE --></td>
 </tr>
 <tr>
 <td>&nbsp;</td>
 </tr>
 </tbody>
 </table>
 <div class="edit" style="position: relative;">
 <table class="fullWidth" width="600" cellspacing="0" cellpadding="0" border="0" bgcolor="#ffffff" align="center">
 <tbody>
 <tr>
 <td><table class="fullWidth" width="562" cellspacing="0" cellpadding="0" border="0" align="center">
 <tbody>
 <tr>
 <td align="center" style="line-height: 15px;font-size: 14px;padding: 10px;" height="15"><strong>2800</strong> cours par semaine - <strong>90</strong> activit&eacute;s - <strong>27</strong> clubs à Paris - <strong style="color: #E21518;">Premier r&eacute;seau parisien </strong></td>
 </tr>
 </tbody>
 </table></td>
 </tr>
 <tr>
 <td><div style="padding:20px;font-family:Arial;font-size:18px;line-height:1;text-align:center;"><a href="https://www.facebook.com/cerclesdelaforme/?utm_source=newsletter&amp;utm_medium=email&amp;utm_campaign=reabo"><em class="fab fa-facebook-f fa-2x"></em></a> <a href="https://twitter.com/cerclesdelaform"><em class="fab fa-twitter fa-2x"></em></a> <a href="https://www.youtube.com/user/CerclesdelaformeTV/?utm_source=newsletter&amp;utm_medium=email&amp;utm_campaign=reabo"><em class="fab fa-youtube fa-2x"></em></a> <a href="https://www.pinterest.fr/cerclesdelaform/?utm_source=newsletter&amp;utm_medium=email&amp;utm_campaign=reabo"><em class="fab fa-pinterest-p fa-2x"></em></a> <a href="https://www.instagram.com/cerclesdelaforme/"><em class="fab fa-instagram fa-2x"></em></a></div></td>
 </tr>
 </tbody>
 </table>
 </div></td>
 </tr>
 </tbody>
</table>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="format-detection" content="telephone=yes">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1.0">
<meta name="x-apple-disable-message-reformatting">
<title>BLACK FRIDAY AUX CERCLES DE LA FORME</title>
<style type="text/css">
* 
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;

 @import url('https://fonts.googleapis.com/css?family=Anton');
.fab 
	color: #e52121;
	margin: 0 5px;
	font-family: "Font Awesome 5 Brands";

body 
	-webkit-print-color-adjust: exact;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;

/*.row margin: 0 auto; */
.white 
	color: #ffffff !important;

.white a 
	color: #ffffff !important;

td 
	font-family: Arial, Helvetica, sans-serif;

a:hover 
	color: #000000;

a:visited 
	color: #000000;

a[x-apple-data-detectors] 
	color: inherit !important;
	text-decoration: none !important;
	font-size: inherit !important;
	font-family: inherit !important;
	font-weight: inherit !important;
	line-height: inherit !important;

</style>
<style media="print" type="text/css">
a[x-apple-data-detectors] 
	color: inherit !important;
	text-decoration: none !important;
	font-size: inherit !important;
	font-family: inherit !important;
	font-weight: inherit !important;
	line-height: inherit !important;

h3 
	margin: 0;

/*table responsive */
	
/* Table Base */

.table 
	width: 100%;

.table th, .table td 
	font-weight: normal;
	font-size: 12px;
	/*padding: 8px 15px;*/
	line-height: 20px;
	vertical-align: middle;/*border-top: 1px solid #dddddd;*/

.table thead th 
	background: #eeeeee;
	vertical-align: bottom;

.table tbody > tr:nth-child(odd) > td, .table tbody > tr:nth-child(odd) > th 
	background-color: #fafafa;

.table .t-small 
	width: 5%;

.table .t-medium 
	width: 15%;

.table .t-status 
	font-weight: bold;

.table .t-active 
	color: #46a546;

.table .t-inactive 
	color: #e00300;

.table .t-draft 
	color: #f89406;

.table .t-scheduled 
	color: #049cdb;

span 
	margin: 0;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";


/* Small Sizes */
@media (max-width: 480px) 
.table-action thead 
	display: none;

.table-action tr 
	border-bottom: 0.8px solid #dddddd;

.table-action td 
	border: 0;

.table-action td:not(:first-child) 
	display: block;


</style>
<link href="https://fonts.googleapis.com/css?family=Anton" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
</head>
<body style="margin: 0; padding: 0;" bgcolor="#e0e0e0">
<table width="100%" cellspacing="0" cellpadding="0" border="0" bgcolor="#e0e0e0" style="margin-top: 20px;">
 <tbody>
 <tr>
 <td width="600" align="center"><!-- Visually Hidden Preheader Text : BEGIN -->
 
 <div style="display:none;font-size:1px;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;mso-hide:all;font-family: sans-serif;"> Jusqu'au 30 novembre 2018 1 mois suppl&eacute;mentaire aux Cercles de la Forme à l'occasion du Black Friday. </div>
 
 <!-- Visually Hidden Preheader Text : END -->
 
 <div class="edit" style="position: relative;">
 <table class="fullWidth" width="600" cellspacing="0" cellpadding="0" border="0" bgcolor="#181818" align="center" style="padding: 15px;">
 <tbody>
 <tr>
 <td style="width: 50%" align="center"><a href="https://www.cerclesdelaforme.com/" target="_blank"><img src="http://img.mailinblue.com/2107629/images/5be3fa386d31f_1541667384.png" style="display: block;" alt="cdf" class="fullWidth" width="243" height="auto" border="0"></a></td>
 </tr>
 </tbody>
 </table>
 </div>
 <div class="edit" style="position: relative;">
 <table class="fullWidth" width="600" cellspacing="0" cellpadding="0" border="0" bgcolor="#181818" align="center">
 <tbody>
 <tr height="100">
 <td align="center"><img src="http://img.mailinblue.com/2107629/images/5bed56bbef5ff_1542280891.jpg" alt="bf"/></td>
 </tr>
 </tbody>
 </table>
 </div>
 <table class="fullWidth" width="600" cellspacing="0" cellpadding="0" border="0" bgcolor="#181818">
 <tbody>
 <tr>
 <td>&nbsp;</td>
 </tr>
 <tr>
 <td align="center"><span style="color: #ffff00;font-size: 3rem;font-weight: bold;font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif';margin: -20px;">1 MOIS DE SPORT</span></td>
 </tr>
 <tr>
 <td align="center"><span style="color: #ffff00;font-size: 4rem;font-weight: bolder;font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif';margin: -20px;">OFFERT</span></td>
 </tr>
 <tr>
 <td align="center"><span style="color: #ffff00;font-size: 1.8rem;font-weight: bold;font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif';margin: -20px;">1 an = 13 mois</span></td>
 </tr>
 <tr>
 <td>&nbsp;</td>
 </tr>
 <tr>
 <td align="center" style="padding:0 40px"><p> <span style="color: whitesmoke;font-size: 1rem;font-weight: bold;">Pour toute contremarque valid&eacute;e à l'accueil d'un de nos clubs sur pr&eacute;sentation de cet email, <span style="color: #ffff00;">jusqu'au 30 novembre 2018.</span> </span> </p></td>
 </tr>
 <tr>
 <td>&nbsp;</td>
 </tr>
 <tr>
 <td>&nbsp;</td>
 </tr>
 <tr>
 <td><!-- TABLE -->
 
 <table width="600" style="font-size: 13px;padding: 0px;">
 <tbody>
 <tr align="center">
 <td>&nbsp;</td>
 <td style="font-size: 15px;font-weight: bold;text-transform: uppercase;" align="center"><span style="background-color: #ffff00;padding: 10px;"><a href="https://www.cerclesdelaforme.com/clubs-de-sport-fitness/" style="color: #181818; font-family:Arial, Helvetica, sans-serif; text-decoration:none; text-align:center;color:black;">VOIR NOS CLUBS</a></span></td>
 <td>&nbsp;</td>
 </tr>
 <tr>
 <td>&nbsp;</td>
 </tr>
 <tr>
 <td>&nbsp;</td>
 </tr>
 </tbody>
 </table>
 
 <!-- END TABLE --></td>
 </tr>
 <tr>
 <td>&nbsp;</td>
 </tr>
 </tbody>
 </table>
 <div class="edit" style="position: relative;">
 <table class="fullWidth" width="600" cellspacing="0" cellpadding="0" border="0" bgcolor="#ffffff" align="center">
 <tbody>
 <tr>
 <td><table class="fullWidth" width="562" cellspacing="0" cellpadding="0" border="0" align="center">
 <tbody>
 <tr>
 <td align="center" style="line-height: 15px;font-size: 14px;padding: 10px;" height="15"><strong>2800</strong> cours par semaine - <strong>90</strong> activit&eacute;s - <strong>27</strong> clubs à Paris - <strong style="color: #E21518;">Premier r&eacute;seau parisien </strong></td>
 </tr>
 </tbody>
 </table></td>
 </tr>
 <tr>
 <td><div style="padding:20px;font-family:Arial;font-size:18px;line-height:1;text-align:center;"><a href="https://www.facebook.com/cerclesdelaforme/?utm_source=newsletter&amp;utm_medium=email&amp;utm_campaign=reabo"><em class="fab fa-facebook-f fa-2x"></em></a> <a href="https://twitter.com/cerclesdelaform"><em class="fab fa-twitter fa-2x"></em></a> <a href="https://www.youtube.com/user/CerclesdelaformeTV/?utm_source=newsletter&amp;utm_medium=email&amp;utm_campaign=reabo"><em class="fab fa-youtube fa-2x"></em></a> <a href="https://www.pinterest.fr/cerclesdelaform/?utm_source=newsletter&amp;utm_medium=email&amp;utm_campaign=reabo"><em class="fab fa-pinterest-p fa-2x"></em></a> <a href="https://www.instagram.com/cerclesdelaforme/"><em class="fab fa-instagram fa-2x"></em></a></div></td>
 </tr>
 </tbody>
 </table>
 </div></td>
 </tr>
 </tbody>
</table>
</body>
</html>

html css newsletter

edited Nov 15 '18 at 14:00

asked Nov 15 '18 at 13:49

Rabah

347

edited Nov 15 '18 at 14:00

asked Nov 15 '18 at 13:49

Rabah

347

edited Nov 15 '18 at 14:00

asked Nov 15 '18 at 13:49

Rabah

347

asked Nov 15 '18 at 13:49

Rabah

347

asked Nov 15 '18 at 13:49

Rabah

347

add a comment |

1 Answer
1

active

oldest

votes

The short answer is that each email client behaves differently, none is as fully functional with CSS as a web-browser, and each supports a varying number of css-styles. There is a pretty comprehensive list of styles and which browsers/versions support which on Campaign Monitor's Ultimate Guide to CSS.

The answer to how you address them is quite complicated. Each version of each client is going to have a long list of tips & tricks to make it work better, and that might just break your CSS in other clients. As an example, here are just a few aspects of how to work with outlook:

https://www.emailonacid.com/blog/article/email-development/how-to-create-excellent-emails-for-outlook-com/

https://group-mail.com/html-email/tips-to-create-html-email-that-works-with-all-email-clients-part-1/

https://templates.mailchimp.com/development/css/outlook-conditional-css/

The best way to see how your email will behave in multiple browsers is to use a service like Litmus which has a trial period so you can compare it to free options like mjml.io

answered Nov 15 '18 at 14:16

mtr.web

1,1761816

I see now. thank you for this complete answer. I'am burning my brain to find why in yahoo the display is incorrect, gmail, etc...

– Rabah
Nov 15 '18 at 14:23

add a comment |

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);

);

draft saved

draft discarded

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53320927%2fwhy-my-display-change-between-html-and-newsletter%23new-answer', 'question_page');

);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

https://www.emailonacid.com/blog/article/email-development/how-to-create-excellent-emails-for-outlook-com/

https://group-mail.com/html-email/tips-to-create-html-email-that-works-with-all-email-clients-part-1/

https://templates.mailchimp.com/development/css/outlook-conditional-css/

The best way to see how your email will behave in multiple browsers is to use a service like Litmus which has a trial period so you can compare it to free options like mjml.io

answered Nov 15 '18 at 14:16

mtr.web

1,1761816

I see now. thank you for this complete answer. I'am burning my brain to find why in yahoo the display is incorrect, gmail, etc...

– Rabah
Nov 15 '18 at 14:23

add a comment |

https://www.emailonacid.com/blog/article/email-development/how-to-create-excellent-emails-for-outlook-com/

https://group-mail.com/html-email/tips-to-create-html-email-that-works-with-all-email-clients-part-1/

https://templates.mailchimp.com/development/css/outlook-conditional-css/

The best way to see how your email will behave in multiple browsers is to use a service like Litmus which has a trial period so you can compare it to free options like mjml.io

answered Nov 15 '18 at 14:16

mtr.web

1,1761816

I see now. thank you for this complete answer. I'am burning my brain to find why in yahoo the display is incorrect, gmail, etc...

– Rabah
Nov 15 '18 at 14:23

add a comment |

https://www.emailonacid.com/blog/article/email-development/how-to-create-excellent-emails-for-outlook-com/

https://group-mail.com/html-email/tips-to-create-html-email-that-works-with-all-email-clients-part-1/

https://templates.mailchimp.com/development/css/outlook-conditional-css/

The best way to see how your email will behave in multiple browsers is to use a service like Litmus which has a trial period so you can compare it to free options like mjml.io

answered Nov 15 '18 at 14:16

mtr.web

1,1761816

https://www.emailonacid.com/blog/article/email-development/how-to-create-excellent-emails-for-outlook-com/

https://group-mail.com/html-email/tips-to-create-html-email-that-works-with-all-email-clients-part-1/

https://templates.mailchimp.com/development/css/outlook-conditional-css/

The best way to see how your email will behave in multiple browsers is to use a service like Litmus which has a trial period so you can compare it to free options like mjml.io

answered Nov 15 '18 at 14:16

mtr.web

1,1761816

answered Nov 15 '18 at 14:16

mtr.web

1,1761816

answered Nov 15 '18 at 14:16

mtr.web

1,1761816

answered Nov 15 '18 at 14:16

mtr.web

1,1761816

I see now. thank you for this complete answer. I'am burning my brain to find why in yahoo the display is incorrect, gmail, etc...

– Rabah
Nov 15 '18 at 14:23

add a comment |

I see now. thank you for this complete answer. I'am burning my brain to find why in yahoo the display is incorrect, gmail, etc...

– Rabah
Nov 15 '18 at 14:23

I see now. thank you for this complete answer. I'am burning my brain to find why in yahoo the display is incorrect, gmail, etc...

– Rabah
Nov 15 '18 at 14:23

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Myujth