I'm very new to coding and I'm trying to code only the footer of an email through hubspot - does anyone have experience creating modules on hubspot? I'm finding it really hard and I also don't know much about coding in emails.. Inline css is very annoying. Honestly, I know it looks like a mess. And can I even include HubL variables in html? Hubspot creates them for emails. Ugh Help.
<!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>Footer</title>
<style type="text/css">
.ExternalClass {width: 100%;}
table {border-collapse:separate;}
a, a:link, a:visited {text-decoration: none; color: #06AE8F;}
a:hover {text-decoration: underline;}
h2,h2 a,h2 a:visited,h3,h3 a,h3 a:visited,h4,h5,h6,.t_cht {color:#ffffff;}
.ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td {line-height: 100%;}
.ExternalClass {width: 100%;}
#media screen and (-webkit-min-device-pixel-ratio:0) {
(min-device-width: 601px)
width: 600px !important;
.col380 {
width: 380px!important;
}
.col425 {
width: 425px!important;
}
.col380 {
width: 380px!important;
}
}
</style>
</head>
<body yahoo="" bgcolor="#f6f8f1" style="margin: 0; padding: 0; min-width: 100%;">
<table width="100%" bgcolor="#f6f8f1" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<!--[if (gte mso 9)|(IE)]>
<table width="600" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<![endif]-->
</td><td class="footer" bgcolor="#ffffff" style="padding: 20px 30px 15px 30px;">
<table width="100%" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="center" class="footercopy" style="color: #C0C0C0; font-family: Helvetica; font-size: 12px; mso-line-height-rule:exactly";>
<i>Copyright © 2019 DonorSearch, All rights reserved.</i><br>
Our mailing address is:<br>
{{ site_settings.company_name }}<br>
{{ site_settings.company_street_address_1 }}<br>
{{ site_settings.company_city }}, {{ site_settings.company_state }} {{ site_settings.company_zip }}<br>
410-670-7880<br>
<a class="link1" a="" href="mailto:email#email.com" style="color: #D6B229; text-decoration: underline;">email#email.com</a><br>
Want to change how you receive these emails?<br>
<a class="link" a="" href="{{ unsubscribe_link }}" style="color: #06AE8F; text-decoration: underline;">You can update your preferences</a> or
<a class="link" a="" href="{{ unsubscribe_link_all }}" style="color: #06AE8F; text-decoration: underline;"> Unsubscribe from mailing lists.</a>
</td>
</tr>
<tr>
<td align="center" style="padding: 20px 0 0 0;">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
</tr></table></td>
</tr>
</table>
</td></tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</body>
</html>
Related
I have an email template. It looks perfect in Gmail (all browsers) and in Web Outlook (all browsers).
But in Outlook 2019 extra white space is added from the left and right side. I suppose it is related to the images. When they are locked the blank space does not appear. When
I decide to download them the blank space appears. I can't find what code causes this error.
In Outlook 2013 this does not happen, respect the maximum width of 600px.
Help me with this problem? I've already tried everything.
Share images and code:
Outlook 2013
Outlook 2019
<!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" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<title>*|MC:SUBJECT|* </title>
<!-- utf-8 works for most cases -->
<meta charset="UTF-8">
<!--[if !mso]><!-->
<meta http-equiv="x-ua-compatible" content="IE=edge">
<!--<![endif]-->
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--[if mso]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG />
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
<!--[if lte mso 11]>
<style>
.mj-outlook-group-fix {
width:100% !important;
}
</style>
<![endif]-->
<!--Web Fonts --->
<!--[if !mso]><!-->
<link href="https://fonts.googleapis.com/css2?family=Lato:wght#100;300;400;700;900&display=swap" rel="stylesheet">
<!--<![endif]-->
<style type="text/css">
/*Outlook Reset Styles*/
.ExternalClass p {
margin: 0px;
}
.ReadMsgBody {
width: 100%
}
.ExternalClass {
width: 100%;
}
.ExternalClass, .ExternalClass * {
line-height: 100%;
}
.yshortcuts a {
border-bottom: none !important;
}
.mobile-link--footer a {
color: #666666 !important;
}
#outlook a{
padding:0;
}
#body_text td {
padding-left: 10px;
padding-right: 10px;
}
/*Global Styles*/
body{
margin:0 auto !important;
padding:0 !important;
width:100% !important;
-webkit-text-size-adjust:100%;
-ms-text-size-adjust:100%;
/*Default Font*/
font-family:'Tahoma', Verdana,sans-serif;
font-size: 14px;
font-weight: 400;
color: #202020;
}
table,td{
border-collapse:collapse;
mso-table-lspace:0;
mso-table-rspace:0;
}
table{
border-spacing:0 !important;
border-collapse:collapse !important;
table-layout:fixed !important;
margin:0 auto !important;
}
img{
border:0;
height:auto;
line-height:100%;
outline:none;
text-decoration:none;
display: block;
-ms-interpolation-mode:bicubic;
}
p{
display:block;
margin:2px 0;
}
a{
text-decoration:none;
}
.yshortcuts a{
border-bottom:none !important;
}
a[x-apple-data-detectors]{
color:inherit !important;
}
.mcnPreviewText{
display:none !important;
}
/*Buttons & other sections*/
.button{
display:inline-block;
letter-spacing:2px;
padding: 10px 10px;
text-decoration:none;
background: #6b6b6b;
background-color: #6b6b6b;
border-radius: 5px;
}
.bullet{
background: #6b6b6b;
background-color: #6b6b6b;
border-radius: 5px;
text-align: center;
padding: 3px 0px 3px 0px;
margin: 0 auto !important;
display: block;
width: 100%;
}
/*obile Responsives Styles*/
#media only screen and (max-width:480px){
.mj-full-width-mobile{
width:100% !important;
}
.centermobile{
margin: 0 auto !important;
}
.blockwrap {
display: block !important;
}
.hide{
display: none !important;
}
.textcenter{
text-align: center !important;
}
.textleft{
text-align: left !important;
}
.textright{
text-align: right !important;
}
.paddingtotal{
padding: 0px 0px 0px 0px !important;
}
.paddingsi{
padding: 20px 0px 20px 0px !important;
}
.paddingid{
padding: 0px 20px 0px 20px !important;
}
.textminium{
font-size: 14px !important;
}
.headerminium{
font-size: 20px !important;
}
}
/*Right & Left Column Responsives Styles*/
#media screen and (max-width: 600px){
.stack-column,.stack-column-center{
display:block !important;
width:100% !important;
max-width:100% !important;
direction:ltr !important;
}
} #media screen and (max-width: 600px){
.stack-column-center{
text-align:center !important;
}
}
#media screen and (max-width: 600px){
.fluid,.fluid-centered{
max-width:100% !important;
height:auto !important;
margin-left:auto !important;
margin-right:auto !important;
}
}
/*Container Styles*/
.wrapper{
max-width:600px;
margin: 0 auto !important;
}
.clear{
width:inherit;
clear:both;
}
</style>
</head>
<!--Start body of the email -->
<body style="background-color:#E0E0E0;background: #E0E0E0;margin: 0;" width="100%" bgcolor="#E0E0E0" >
<!--Start wrapper -->
<!--[if mso | IE]>
<table border="0" cellpadding="0" cellspacing="0" class="wrapper" align="center" style="width:600px !important;" width="600">
<tr>
<td style="mso-line-height-rule:exactly;max-width:600px !important;" class="wrapper" align="center" width="600">
<![endif]-->
<table summary="Layout" border="0" cellpadding="0" cellspacing="0" role="presentation" align="center" style="background:#FFFFFF;background-color:#FFFFFF;max-width: 600px !important ;" bgcolor="#FFFFFF" width="600">
<tbody>
<tr>
<td id="content" class="wrapper" align="center" width="600" style="direction:ltr;padding:0;max-width: 600px !important;border-collapse:collapse"><!-- Start Main Colum -->
<!--[if mso | IE]>
<table summary="Layout" role="presentation" border="0" cellpadding="0" cellspacing="0" class="wrapper" align="center" style="max-width:600px;background-color:#c2c2c2; background:#c2c2c2;" width="100%" bgcolor="#c2c2c2">
<tr>
<td width="100%" style="mso-line-height-rule:exactly;mso-padding-alt: 0px 0px;max-width:600px;background-color: #c2c2c2; background: #c2c2c2;" class="wrapper" align="center" bgcolor="#c2c2c2">
<![endif]-->
<table summary="Layout" border="0" cellpadding="0" cellspacing="0" role="presentation" align="center" width="100%" class="mj-full-width-mobile mj-outlook-group-fix wrapper" bgcolor="#c2c2c2" style="direction:ltr;vertical-align:top;width:100%; background-color: #c2c2c2; background: #c2c2c2; max-width: 600px;">
<tbody>
<tr>
<td align="center" class="wrapper" width="100%" bgcolor="#c2c2c2" style="vertical-align:top;margin: 0 auto;padding: 5px 0px;background-color: #c2c2c2; background: #c2c2c2;max-width: 600px;" mc:edit="header_logo">
<table cellspacing="0" cellpadding="0" border="0" class="" bgcolor="#c2c2c2" width="100%" style="max-width: 600px;;background-color:#c2c2c2; background:#c2c2c2;">
<tr> <td align="center" width="100%" bgcolor="#c2c2c2" style="max-width: 600px;background-color: #c2c2c2; background: #c2c2c2; ">
<center>
<img src="https://mcusercontent.com/8bebfe395cef9579903533c79/images/22c4d06c-6363-4d2c-808c-6682d6866711.jpg" alt="" style="max-width: 150px;" />
</center>
</td> </tr>
</table>
</td>
</tr>
</tbody>
</table>
<!--[if mso | IE]>
</td>
</tr>
</table>
<![endif]-->
<!--[if mso | IE]>
<table summary="Layout" role="presentation" border="0" cellpadding="0" cellspacing="0" class="wrapper" align="center" style="width:600px;" width="600">
<tr>
<td width="600" align="center">
<![endif]-->
<table summary="Layout" border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%" mc:repeatable="content_block" mc:variant="header_title_text" class="mj-full-width-mobile mj-outlook-group-fix" style="direction:ltr;vertical-align:top;width:100%; background-color: #FFFFFF; background: #FFFFFF;margin: 10px 0px 0px 0px !important; ">
<tbody>
<tr>
<td style="vertical-align:top;" mc:edit="header_title_text" class="stack-column-center">
<h1 style="font-family:'Tahoma', Verdana,sans-serif; text-align: center;">Heading H1 Text-Tittle</h1>
</td>
</tr>
</tbody>
</table>
<!--[if mso | IE]>
</td>
</tr>
</table>
<![endif]-->
<!--[if mso | IE]>
<table summary="Layout" role="presentation" border="0" cellpadding="0" cellspacing="0" class="wrapper" align="center" style="width:600px;" width="600">
<tr>
<td width="600" align="center">
<![endif]-->
<table summary="Layout" border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%" mc:repeatable="content_block" mc:variant="header_title_text_extended" class="mj-full-width-mobile mj-outlook-group-fix" style="direction:ltr;vertical-align:top;width:100%; background-color: #FFFFFF; background: #FFFFFF;margin: 10px 0px 0px 0px !important; ">
<tbody>
<tr>
<td style="vertical-align:top;" mc:edit="header_title_text_extended" class="stack-column-center">
<h1 style="font-family:'Tahoma', Verdana,sans-serif; text-align: center;">Heading H1 Text-SubTittle</h1>
<p class="textcenter" style="text-align: center;padding: 5px 35px 10px 35px; line-height: 150%;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. </p>
</td>
</tr>
</tbody>
</table>
<!--[if mso | IE]>
</td>
</tr>
</table>
<![endif]-->
<!--[if mso | IE]>
<table summary="Layout" role="presentation" border="0" cellpadding="0" cellspacing="0" class="wrapper" align="center" style="width:600px;" width="600">
<tr>
<td width="600" align="center">
<![endif]-->
<table summary="Layout" border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%" bgcolor="#FFFFFF" mc:repeatable="content_block" mc:variant="hero_image" style="direction:ltr;display:inline-block;vertical-align:top;width:100%; background-color: #FFFFFF; background: #FFFFFF; margin: 10px 0px 10px 0px !important; ">
<tbody>
<tr>
<td style="vertical-align:top;" mc:edit="hero_image">
<table summary="Layout" border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%" style="padding: 0px 10px 0px 10px;">
<tr>
<td>
<center>
<img src="https://mcusercontent.com/8bebfe395cef9579903533c79/images/9df5e4ba-1037-41b9-9ac1-b9a7a18dd064.jpg" alt="" class="stack-column-center" style="max-width: 600px;">
<br />
</center>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
<!--[if mso | IE]>
</td>
</tr>
</table>
<![endif]-->
<!--[if mso | IE]>
<table summary="Layout" role="presentation" border="0" cellpadding="0" cellspacing="0" class="wrapper" align="center" style="max-width:600px;background-color: #c2c2c2; background: #c2c2c2;" width="100%" bgcolor="#c2c2c2">
<tr>
<td width="100%" style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;max-width:600px;background-color: #c2c2c2; background: #c2c2c2;" class="wrapper" align="center" bgcolor="#c2c2c2">
<![endif]-->
<table summary="Layout" border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%" bgcolor="#c2c2c2" id="footer" class="mj-full-width-mobile mj-outlook-group-fix wrapper stack-column-center" style="direction:ltr;vertical-align:top;width:100%; background-color: #c2c2c2; background: #c2c2c2;font-size: 10px !important;" >
<tbody>
<tr>
<td align="center" class="wrapper" bgcolor="#c2c2c2" style="direction:ltr;vertical-align:top;max-width:600px; background-color: #c2c2c2; background: #c2c2c2;" width="100%">
<table cellspacing="0" cellpadding="0" border="0" class="" width="100%" style="max-width: 600px;">
<tr>
<td id="businessinfo" width="50%" class="textcenter paddingsi blockwrap" style="vertical-align:top; text-align: left;padding: 20px 20px 20px 20px;margin: 0 auto !important;" mc:edit="footer_section">
<span style="font-weight: 400;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. </span>
<br />
</td>
<td id="legal" width="50%" class="textcenter paddingsi blockwrap" style="vertical-align:top;text-align: right;padding: 20px 20px 20px 20px;margin: 0 auto !important;">
Unsuscribe
<br />
Update Profile
<br />
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
<!--[if mso | IE]>
</td>
</tr>
</table>
<![endif]-->
</td><!-- Final Main Colum - End wrapper -->
</tr>
</tbody>
</table>
<!--[if mso | IE]>
</td>
</tr>
</table>
<![endif]-->
</body><!--Final cuerpo del email - End body of the email -->
</html>
welcome to the wounderfull world of Email coding ;)
I ran some tests on your template, and found out its the big image in the middel that mess things up.
Outlook dosnt always work with just style="max-width:600px;", you need the width on the <img> tag it self.
Your template is 600px, your image is set to 600px, but theres also 20px margin on each side extra.
This should solve your issue
<center>
<img width="560" src="https://mcusercontent.com/8bebfe395cef9579903533c79/images/9df5e4ba-1037-41b9-9ac1-b9a7a18dd064.jpg" alt="" class="stack-column-center" style="max-width: 560px;">
</center>
Before:
After:
This is most likely happening due to your hero image.
If you do not set the width attribute in <img> tags, outlook desktop apps tend to show the image at its original width. Setting max-width only is not enough.
The Header has extra space on left and right because the Hero image is taking extra space. It is showing up in 650 pixels width even though max-width is set to 600 pixels. Simply add width attribute to the <img> tag (preferably at the end) and it should fix the issue. So, your <img> tag for the hero image should look like this,
<img src="https://mcusercontent.com/8bebfe395cef9579903533c79/images/9df5e4ba-1037-41b9-9ac1-b9a7a18dd064.jpg" alt="" class="stack-column-center" style="max-width: 600px;" width="600" />
notice the width attribute I added at the end.
This may create some responsiveness issue. To solve the responsiveness add this to the head style tag (if not already there).
#media screen and (max-width: 600px) {
img {width: 100% !important;}
}
All your images have max-width set inline, so making width 100% won't make them blow up in mobile screens.
Hope this helps.
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>
<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" />
</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">
T:0031-024-3775233 <br/>
<span style="text-decoration:none">F: 0031-024-3779316</span> <br/>
<a style="text-decoration:none; color:#9C1C27;" href="mailto:sales#deleeuwhides.nl"><span style="text-decoration:none; color:#9C1C27;">sales#deleeuwhides.nl</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?
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">
T:0031-024-3775233 <br/>
<span style="text-decoration:none">F: 0031-024-3779316</span> <br/>
<a style="text-decoration:none; color:#9C1C27;" href="mailto:sales#deleeuwhides.nl"><span style="text-decoration:none; color:#9C1C27;">sales#deleeuwhides.nl</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>
`
Solved it! I first removed all align attributes which helped to put the columns next to each other. I then removed all the tables and made one "wrapper" table with a table nested in to this wrapper table which contains everything. Hope I'm describing this clearly, lol. Anyway this solved all my problems!
This is my code for anyone who is interested or has the same problems I did:
<!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;
border-spacing:0;
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 wrapper table -->
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td>
<table cellpadding="0" cellspacing="0" border="0" width="600" class="fluid-table">
<!-- Start of name, function title and logo -->
<tr>
<td style="padding-bottom:3px; outline:none; text-decoration:none; color:#000; font-size:14px; text-align:left; font-family: Open Sans, Arial, Verdana, sans-serif;">
<strong style="color: #9C1C27;font-size: 15px;">Voornaam en Achternaam</strong><br/>
<em style="color: #B5987F; font-weight: normal; font-size: 14px;">Functie titel</em><br/>
</td>
</tr>
<tr>
<td style="padding-bottom:5px;">
<img src="http://www.deleeuwhides.com/img/logo.png" nosend="1" border="0" style="display:block; width:179px; height:111px;" alt="De Leeuw Hides logo" title="De Leeuw Hides logo" />
</td>
</tr>
<!-- End of name, function and logo -->
<!-- Contact info and Start of first column -->
<tr>
<td width="200" style="padding-bottom:3px; text-decoration:none; color:#B5987F; font-size:14px; font-family: Open Sans, Arial, Verdana, sans-serif;">
<strong style="color:#9C1C27;">Location Nijmegen</strong><br/>
Lindenhoutseweg 69<br/>
6545 AH Nijmegen <br/>
The Netherlands
</td>
<!-- End of first column -->
<!-- Start of second column -->
<td width="200" style="padding-bottom:3px; text-decoration:none; color:#B5987F; font-size:14px; font-family: Open Sans, Arial, Verdana, sans-serif;">
<strong style="color:#9C1C27;">Location Winterswijk</strong><br/>
Industrieweg 2a<br/>
7102 DZ Winterswijk<br/>
The Netherlands
</td>
<!-- End of second column -->
<!-- Start of third column -->
<td width="200" style="padding-bottom:3px; text-decoration:none; color:#B5987F; font-size:14px; font-family: Open Sans, Arial, Verdana, sans-serif;">
T:0031-024-3775233 <br/>
<span style="text-decoration:none">F: 0031-024-3779316</span> <br/>
<a style="text-decoration:none; color:#9C1C27;" href="mailto:sales#deleeuwhides.nl"><span style="text-decoration:none; color:#9C1C27;">sales#deleeuwhides.nl</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>
</table>
<!-- End of third column and contact info -->
<!-- Start of branding identity elements -->
<tr>
<td bgcolor="#B5987F" style="height:3px; width:100%;"></td>
</tr>
<tr>
<td bgcolor="#ffffff" style="height:3px; width:100%;"></td>
</tr>
<tr>
<td valign="middle" bgcolor="#9C1C27" style="height:30px; width:100%;">
<center>
<img style="display:block;"src="http://www.deleeuwhides.com/img/slogan-footer.png" alt="slogan" />
</center>
</td>
</tr>
<!-- End of branding identity elements -->
</td>
</tr>
</table>
<!-- end of wrapper table -->
</div>
</body>
</html>
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 have made an email signature for a client which works perfectly on everything except Gmail. When I try to use the signature in Gmail it somehow centers it. This is only on the browser version. When I view the signature in the mail app on the iPhone it looks good. When I send the signature to Gmail from, for example, Outlook it looks good too. A screenshot of the problem: click .
I have no idea why this happens so I hope someone here has the answer for me. My code:
<!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%;">
<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">
</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">
<font>T:</font> 0031-024-3775233 <br>
F: 0031-024-3779316 <br>
<a style="text-decoration:none; color:#9C1C27;" href="mailto:sales#deleeuwhides.nl">sales#deleeuwhides.nl</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>
Thanks in advance!
Somehow I fixed this by starting to build the code line for line in a new .html document. Testing it every time in Gmail until the centering would occur again, but it never did. So now it is working like it should!
Have you tried float left in your outer table which has a class of fluid-table?
If that doesn't fix it, give the below a shot and let me know if it works.
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="width:100%; max-width:600px;">[signature content here]</td>
<td> </td>
</tr>
</tbody>
</table>
I have created a table with two columns, first column has max width of 600px and the second doesn't have a width. Place all the content into the first column. I have placed the style inline, you can move it to a class if you want to.
Cheers
I had the same issue and solved it by applying "margin:0 !important" to the signature main container.
I have created an html file that I converted into a outlook template file. My template has a solid blue background color that is defined by setting the bgcolor attribute on the body tag. When I send this to users everything is great until they reply using Outlook 2010 or 2013. When they reply the blue background color is present in their response. How can I write my css to only fill the background on the initial email, not the reply?
<body bgcolor="#0a3353">
<!-- Content tables -->
<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#0a3353">
<tr>
<td>
<table class="container" bgcolor="#ffffff" width="70%" align="center" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<table class="container" width="100%" align="center" border="0" cellpadding="0" cellspacing="0">
I also noticed this behavior does not occur when using Outlook 2011 for mac.
You need a 100% width table in there instead of applying the background color to the body tag.
Here are the 2 setups I use that take control the forwarding background color (#FFFFFF), while setting the html section background (#252525).
Fixed Width Email:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title></title>
<style type="text/css">
/* Client-specific Styles */
#outlook a {padding:0;}
body{width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0;} /* force default font sizes */
.ExternalClass {width:100%;} .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;} /* Hotmail */
a:active, a:visited, a[href^="tel"], a[href^="sms"] { text-decoration: none; color: #000001 !important; pointer-events: auto; cursor: default;}
table td {border-collapse: collapse;}
</style>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" style="margin: 0px; padding: 0px; background-color: #FFFFFF;" bgcolor="#FFFFFF"><table bgcolor="#252525" width="100%" border="0" align="center" cellpadding="0" cellspacing="0"><tr><td><table width="600" border="0" align="center" cellpadding="0" cellspacing="0"><tr><td valign="top" style="padding-top:30px; padding-bottom:30px;">
<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="white">
<tr>
<td style="padding:30px;">
Content
</td>
</tr>
</table>
</td></tr></table></td></tr></table></body></html>
Fluid Email:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title></title>
<style type="text/css">
/* Client-specific Styles */
#outlook a {padding:0;}
body{width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0;} /* force default font sizes */
.ExternalClass {width:100%;} .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;} /* Hotmail */
a:active, a:visited, a[href^="tel"], a[href^="sms"] { text-decoration: none; color: #005288 !important; pointer-events: auto; cursor: default;}
table td {border-collapse: collapse;}
#media only screen and (min-width: 600px) { .maxW { width:600px !important; } }
</style>
</head>
<body style="margin: 0px; padding: 0px; -webkit-text-size-adjust:none; -ms-text-size-adjust:none;" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" bgcolor="#FFFFFF"><table bgcolor="#252525" width="100%" border="0" align="center" cellpadding="0" cellspacing="0"><tr><td valign="top">
<!--[if (gte mso 9)|(IE)]>
<table width="600" align="center" cellpadding="0" cellspacing="0" border="0"><tr><td valign="top">
<![endif]-->
<table width="100%" class="maxW" style="max-width: 600px; margin: auto;" border="0" align="center" cellpadding="0" cellspacing="0"><tr><td valign="top" align="center" style="padding-top:30px; padding-bottom:30px;">
<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF" style="margin: auto;">
<tr>
<td align="left" style="padding:30px;">
Content
</td>
</tr>
</table>
</td></tr></table>
<!--[if (gte mso 9)|(IE)]>
</td></tr></table>
<![endif]-->
</td></tr></table></body></html>
i want to create a newsletter compatitable with Outlook. I'm getting a huge gap on the left only on Outlook clients. It's written in HTML.
http://www.nikosdelig.com/eurasia-newsletter-russian.html
In outlook, especially Outlook 2013, you have to specify any table data (<td>) which has heigh lower than 12px by: style="font-size: 1px; line-height: 1px;". For example:
<td height="1" bgcolor="#000000" style="font-size: 1px; line-height: 1px;"> </td>
Instead of trying to debug, I'll offer you a simplified and stable framework to use instead. As you can see, you don't need a lot of the extra stuff you have in your code, particularly the nested tables and <tbody> tags.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title></title>
<style type="text/css">
/* Client-specific Styles */
#outlook a {padding:0;}
body{width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0;} /* force default font sizes */
.ExternalClass {width:100%;} .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;} /* Hotmail */
#backgroundTable {margin:0; padding:0; width:100% !important; line-height: 100% !important;}
table td {border-collapse: collapse;}
</style>
</head>
<body style="margin: 0px; padding: 0px; background-color: #FFFFFF;" bgcolor="#FFFFFF"><table bgcolor="#f1f1f1" width="100%" border="0" align="center" cellpadding="0" cellspacing="0"><tr><td><table width="600" border="0" align="center" cellpadding="0" cellspacing="0"><tr><td valign="top" style="padding-top:30px; padding-bottom:30px;">
<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr>
<td width="150">
LOGO
</td>
<td width="450" style="padding:20px;">
HEADER TEXT
</td>
</tr>
</table>
<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr>
<td width="150" valign="bottom">
COLUMN
</td>
<td width="450" style="padding:20px;">
BODY<br>
...<br>
...<br>
...<br>
...<br>
</td>
</tr>
</table>
</td></tr></table></td></tr></table></body></html>