I have this simple table newsletter design and I cannot identify what causes the table to be wider than I set it to be.
<table cellpadding="" cellspacing="0" border="1" vallign="top" align="center" max-width="600" style="height:auto;" >
<tr>
<td background="http://img.anpdm.com/BalticDevelopmentForum/background-100.jpg" max-width="600" height="440" alt="Lighouse in Germany" bgcolor="#333333" style="display:block; background-repeat: no-repeat;" valign="middle"><!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="max-width: 600px; max-height: 440px;">
<v:fill type="tile" src="http://img.anpdm.com/BalticDevelopmentForum/background-100.jpg" color="#333333" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<table border="1" cellpadding="0" cellspacing="30" max-width="600">
<tr>
<td align="center"><br>
<img alt="" src="http://img.anpdm.com/BalticDevelopmentForum/Asset-2.png" width="88" height="47" align="center" link="" style="display:block;"/>
</td>
</tr>
<tr>
<td align="center" valign="middle">
<font style="font-weight:100;font-family:Arial, Helvetica, sans-serif; font-size: 12px; color: #ffffff !important;">
<anpa href="http://www.bdforum.org" style="font-weight:100;color: #ffffff; text-decoration: none; padding-right: 1em;">
WEBSITE</anpa>
<anpa href="##TellAFriend##" style="font-weight:none;color: #ffffff; text-decoration: none; padding-right: 1em;">
FORWARD</anpa>
<anpa href="http://www.anpdm.com/form/4743504075464B5943/414358407446455F4571" style="font-weight:none;color: #ffffff; text-decoration: none; padding-right: 1em;">
SUBSCRIBE</anpa>
<anpa href="##OptOutAll##" style="font-weight:none;color: #ffffff; text-decoration: none;">
UNSUBSCRIBE<br>
</anpa></font>
</td>
</tr>
<tr>
<td width="600" align="center" valign="middle"><font style="font-weight:none;font-family:Arial, Helvetica, sans-serif; font-size: 24px; color: #ffffff !important;">
<anpa href="http://www.bdforum.org">
Baltic Development Forum</anpa></font></td>
</tr>
<tr>
<td align="center">
<font style="font-weight:100;font-family:Myriad Pro; font-size: 12px; color: #ffffff !important;">
LATEST BDF NEWS ESPECIALLY FOR YOU
</font></td>
</tr>
<tr>
<td align="center">
<!-- <td align="center" style="background-image:url(http://img.anpdm.com/BalticDevelopmentForum/buttonEmpty.png); background-repeat: no-repeat; background-size: 184px 38px; background-position: center; padding: 9px;" alt="">
<anpa href="http://www.bdforum.org" style="font-family:Arial, Helvetica, sans-serif; font-size: 12px; color: #ffffff; vertical-align: middle;">
WEBSITE</anpa>
</td>-->
<div><!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://www.bdforum.org" style="height:35px;v-text-anchor:middle;width:160px;" arcsize="58%" stroke="f" fillcolor="#d1003e">
<w:anchorlock/>
<center>
<![endif]-->
<a href="http://www.bdforum.org"
style="background-color:#d1003e;border-radius:20px;color:#ffffff;display:inline-block;font-family:Arial, Helvetica, sans-serif; font-size:12px;line-height:35px;text-align:center;text-decoration:none;width:160px;-webkit-text-size-adjust:none;">WEBSITE</a>
<!--[if mso]>
</center>
</v:roundrect>
<![endif]--></div>
</td>
</tr>
</table>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]--></td>
</tr>
</table>
If you could help me I would really appreciate it. I am kind of a beginner. Especially with writing html for emails as its super annoying with different supports
because you have to put max-width="600" inside the style attribute since max-width not a valid attribute for table, fix your problem like this style="height:auto;max-width:600px"
UPDATE
To handle the extra pixels on right and bottom add this style="padding: 0;width: 100%;" to the first td
Put max-width attribute inside style tag
<table cellpadding="" cellspacing="0" border="1" vallign="top" align="center" style="height:auto;max-width:600px" >
For border issue, you can update table tag like
<table cellpadding="" cellspacing="0" border="1" vallign="top" align="center" style="height:auto;max-width:600px;border-bottom: none!important;border-right: none !important;" >
<table cellpadding="" cellspacing="0" border="1" vallign="top" align="center" style="height:auto;max-width:600px;border-bottom: none!important;border-right: none !important;" >
<tr>
<td background="http://img.anpdm.com/BalticDevelopmentForum/background-100.jpg" max-width="600" height="440" alt="Lighouse in Germany" bgcolor="#333333" style="display:block; background-repeat: no-repeat;" valign="middle"><!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="max-width: 600px; max-height: 440px;">
<v:fill type="tile" src="http://img.anpdm.com/BalticDevelopmentForum/background-100.jpg" color="#333333" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<table border="1" cellpadding="0" cellspacing="30" max-width="600">
<tr>
<td align="center"><br>
<img alt="" src="http://img.anpdm.com/BalticDevelopmentForum/Asset-2.png" width="88" height="47" align="center" link="" style="display:block;"/>
</td>
</tr>
<tr>
<td align="center" valign="middle">
<font style="font-weight:100;font-family:Arial, Helvetica, sans-serif; font-size: 12px; color: #ffffff !important;">
<anpa href="http://www.bdforum.org" style="font-weight:100;color: #ffffff; text-decoration: none; padding-right: 1em;">
WEBSITE</anpa>
<anpa href="##TellAFriend##" style="font-weight:none;color: #ffffff; text-decoration: none; padding-right: 1em;">
FORWARD</anpa>
<anpa href="http://www.anpdm.com/form/4743504075464B5943/414358407446455F4571" style="font-weight:none;color: #ffffff; text-decoration: none; padding-right: 1em;">
SUBSCRIBE</anpa>
<anpa href="##OptOutAll##" style="font-weight:none;color: #ffffff; text-decoration: none;">
UNSUBSCRIBE<br>
</anpa></font>
</td>
</tr>
<tr>
<td width="600" align="center" valign="middle"><font style="font-weight:none;font-family:Arial, Helvetica, sans-serif; font-size: 24px; color: #ffffff !important;">
<anpa href="http://www.bdforum.org">
Baltic Development Forum</anpa></font></td>
</tr>
<tr>
<td align="center">
<font style="font-weight:100;font-family:Myriad Pro; font-size: 12px; color: #ffffff !important;">
LATEST BDF NEWS ESPECIALLY FOR YOU
</font></td>
</tr>
<tr>
<td align="center">
<!-- <td align="center" style="background-image:url(http://img.anpdm.com/BalticDevelopmentForum/buttonEmpty.png); background-repeat: no-repeat; background-size: 184px 38px; background-position: center; padding: 9px;" alt="">
<anpa href="http://www.bdforum.org" style="font-family:Arial, Helvetica, sans-serif; font-size: 12px; color: #ffffff; vertical-align: middle;">
WEBSITE</anpa>
</td>-->
<div><!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://www.bdforum.org" style="height:35px;v-text-anchor:middle;width:160px;" arcsize="58%" stroke="f" fillcolor="#d1003e">
<w:anchorlock/>
<center>
<![endif]-->
<a href="http://www.bdforum.org"
style="background-color:#d1003e;border-radius:20px;color:#ffffff;display:inline-block;font-family:Arial, Helvetica, sans-serif; font-size:12px;line-height:35px;text-align:center;text-decoration:none;width:160px;-webkit-text-size-adjust:none;">WEBSITE</a>
<!--[if mso]>
</center>
</v:roundrect>
<![endif]--></div>
</td>
</tr>
</table>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]--></td>
</tr>
Hope it helps.
Related
I am trying to make a custom html newsletter for campaign monitor. Table width is 600px. I have 3 columns of images with text. Each column has a 200px width but images are not taking full width(200px). I want the images fit in the column and should take 200px width for each column. How to solve this?
Note: Same newsletter is working well in outlook 2007 sent from mailchimp. And please don't run your head on classes. I have used the classes in media queries and I have no problem with it. The problem I am facing in outlook 2007.
<table width="600" class="hp" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="200" height="192" class="mob-column" background="https://i.imgur.com/sNVCXJg.jpg" align="left" style="width:200px; height:192px; background-image:url('https://i.imgur.com/sNVCXJg.jpg'); background-repeat:no-repeat; background-size:cover; background-position:center center;" bgcolor="#000080">
<!--[if mso]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:200px; height:192px;>
<v:fill type="tile" src="https://i.imgur.com/sNVCXJg.jpg" color="#000080"/>
<v:textbox style="mso-fit-shape-to-text:true;" inset="0,0,0,0">
<![endif]-->
<div>
<table width="100%" class="hp" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td style="padding:42px 20px 32px 20px; font-family:'Roboto', Arial; font-weight:900; font-size:15.43px; text-transform:uppercase; line-height:23.145px; text-align:center; color:#ffffff;" class="fallback-text-r">
<font face="'Roboto', Arial">Chicken</font>
</td>
</tr>
<tr>
<td style="padding:0px 20px 0px 20px; color:#cac8c6; font-family:'Montserrat', Arial; font-weight:900; font-size:10.29px; line-height:15.435px; text-align:center; color:#ffffff;" class="fallback-text-m">
<font face="'Montserrat', Arial">From</font>
</td>
</tr>
<tr>
<td style="padding:0px 20px 42px 20px; font-family:'Roboto', Arial; font-weight:900; font-size:25.89px; line-height:38.835px; text-align:center; color:#ffffff;" class="fallback-text-r">
<font face="'Roboto', Arial">$10.99</font>
</td>
</tr>
</table>
</div>
<!--[if mso]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
<td width="200" height="192" class="mob-column" background="https://i.imgur.com/DAQXLs7.jpg" align="left" style="width:200px; height:192px; background-image:url('https://i.imgur.com/DAQXLs7.jpg'); background-repeat:no-repeat; background-size:cover; background-position:center center;" bgcolor="#000080">
<!--[if mso]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:200px; height:192px;>
<v:fill type="tile" src="https://i.imgur.com/DAQXLs7.jpg" color="#000080"/>
<v:textbox style="mso-fit-shape-to-text:true;" inset="0,0,0,0">
<![endif]-->
<div>
<table width="100%" class="hp" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td style="padding:42px 20px 32px 20px; font-family:'Roboto', Arial; font-weight:900; font-size:15.43px; text-transform:uppercase; line-height:23.145px; text-align:center; color:#ffffff;" class="fallback-text-r">
<font face="'Roboto', Arial">Fish</font>
</td>
</tr>
<tr>
<td style="padding:0px 20px 0px 20px; color:#cac8c6; font-family:'Montserrat', Arial; font-weight:900; font-size:10.29px; line-height:15.435px; text-align:center; color:#ffffff;" class="fallback-text-m">
<font face="'Montserrat', Arial">From</font>
</td>
</tr>
<tr>
<td style="padding:0px 20px 42px 20px; font-family:'Roboto', Arial; font-weight:900; font-size:25.89px; line-height:38.835px; text-align:center; color:#ffffff;" class="fallback-text-r">
<font face="'Roboto', Arial">$10.99</font>
</td>
</tr>
</table>
</div>
<!--[if mso]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
<td width="200" height="192" class="mob-column" background="https://i.imgur.com/s9isrA4.jpg" align="left" style="width:200px; height:192px; background-image:url('https://i.imgur.com/s9isrA4.jpg'); background-repeat:no-repeat; background-size:cover; background-position:center center;" bgcolor="#000080">
<!--[if mso]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:200px; height:192px;>
<v:fill type="tile" src="https://i.imgur.com/s9isrA4.jpg" color="#000080"/>
<v:textbox style="mso-fit-shape-to-text:true;" inset="0,0,0,0">
<![endif]-->
<div>
<table width="100%" class="hp" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td style="padding:42px 20px 32px 20px; font-family:'Roboto', Arial; font-weight:900; font-size:15.43px; text-transform:uppercase; line-height:23.145px; text-align:center; color:#ffffff;" class="fallback-text-r">
<font face="'Roboto', Arial">Noddles</font>
</td>
</tr>
<tr>
<td style="padding:0px 20px 0px 20px; color:#cac8c6; font-family:'Montserrat', Arial; font-weight:900; font-size:10.29px; line-height:15.435px; text-align:center; color:#ffffff;" class="fallback-text-m">
<font face="'Montserrat', Arial">From</font>
</td>
</tr>
<tr>
<td style="padding:0px 20px 42px 20px; font-family:'Roboto', Arial; font-weight:900; font-size:25.89px; line-height:38.835px; text-align:center; color:#ffffff;" class="fallback-text-r">
<font face="'Roboto', Arial">$10.99</font>
</td>
</tr>
</table>
</div>
<!--[if mso]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</table>
In fact your background images didn't appear neither on Windows 10 Mail app.
For this to work on Win10 mail you need to provide image sizes in Points rather than Pixels.
Can't test on Outlook 2007 but the code below will work on Win 10 Mail so it may also be your answer.
<table width="600" class="hp" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="200" height="192" class="mob-column" background="https://i.imgur.com/sNVCXJg.jpg" align="left" style="width:200px; height:192px; background-image:url('https://i.imgur.com/sNVCXJg.jpg'); background-repeat:no-repeat; background-size:cover; background-position:center center;" bgcolor="#000080">
<!--[if mso]>
<v:image xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style=" border: 0;display: inline-block; width: 150pt; height: 144pt;" src="https://i.imgur.com/sNVCXJg.jpg" /> <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style=" border: 0;display: inline-block;position: absolute;width: 150pt; height: 144pt;">
<v:fill opacity="0%" color="#000080" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<div>
<table width="100%" class="hp" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td style="padding:42px 20px 32px 20px; font-family:'Roboto', Arial; font-weight:900; font-size:15.43px; text-transform:uppercase; line-height:23.145px; text-align:center; color:#ffffff;" class="fallback-text-r">
<font face="'Roboto', Arial">Chicken</font>
</td>
</tr>
<tr>
<td style="padding:0px 20px 0px 20px; color:#cac8c6; font-family:'Montserrat', Arial; font-weight:900; font-size:10.29px; line-height:15.435px; text-align:center; color:#ffffff;" class="fallback-text-m">
<font face="'Montserrat', Arial">From</font>
</td>
</tr>
<tr>
<td style="padding:0px 20px 42px 20px; font-family:'Roboto', Arial; font-weight:900; font-size:25.89px; line-height:38.835px; text-align:center; color:#ffffff;" class="fallback-text-r">
<font face="'Roboto', Arial">$10.99</font>
</td>
</tr>
</table>
</div>
<!--[if mso]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
<td width="200" height="192" class="mob-column" background="https://i.imgur.com/DAQXLs7.jpg" align="left" style="width:200px; height:192px; background-image:url('https://i.imgur.com/DAQXLs7.jpg'); background-repeat:no-repeat; background-size:cover; background-position:center center;" bgcolor="#000080">
<!--[if mso]>
<v:image xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style=" border: 0;display: inline-block; width: 150pt; height: 144pt;" src="https://i.imgur.com/DAQXLs7.jpg" /> <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style=" border: 0;display: inline-block;position: absolute;width: 150pt; height: 144pt;">
<v:fill opacity="0%" color="#000080" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<div>
<table width="100%" class="hp" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td style="padding:42px 20px 32px 20px; font-family:'Roboto', Arial; font-weight:900; font-size:15.43px; text-transform:uppercase; line-height:23.145px; text-align:center; color:#ffffff;" class="fallback-text-r">
<font face="'Roboto', Arial">Fish</font>
</td>
</tr>
<tr>
<td style="padding:0px 20px 0px 20px; color:#cac8c6; font-family:'Montserrat', Arial; font-weight:900; font-size:10.29px; line-height:15.435px; text-align:center; color:#ffffff;" class="fallback-text-m">
<font face="'Montserrat', Arial">From</font>
</td>
</tr>
<tr>
<td style="padding:0px 20px 42px 20px; font-family:'Roboto', Arial; font-weight:900; font-size:25.89px; line-height:38.835px; text-align:center; color:#ffffff;" class="fallback-text-r">
<font face="'Roboto', Arial">$10.99</font>
</td>
</tr>
</table>
</div>
<!--[if mso]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
<td width="200" height="192" class="mob-column" background="https://i.imgur.com/s9isrA4.jpg" align="left" style="width:200px; height:192px; background-image:url('https://i.imgur.com/s9isrA4.jpg'); background-repeat:no-repeat; background-size:cover; background-position:center center;" bgcolor="#000080">
<!--[if mso]>
<v:image xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style=" border: 0;display: inline-block; width: 150pt; height: 144pt;" src="https://i.imgur.com/s9isrA4.jpg" /> <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style=" border: 0;display: inline-block;position: absolute;width: 150pt; height: 144pt;">
<v:fill opacity="0%" color="#000080" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<div>
<table width="100%" class="hp" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td style="padding:42px 20px 32px 20px; font-family:'Roboto', Arial; font-weight:900; font-size:15.43px; text-transform:uppercase; line-height:23.145px; text-align:center; color:#ffffff;" class="fallback-text-r">
<font face="'Roboto', Arial">Noddles</font>
</td>
</tr>
<tr>
<td style="padding:0px 20px 0px 20px; color:#cac8c6; font-family:'Montserrat', Arial; font-weight:900; font-size:10.29px; line-height:15.435px; text-align:center; color:#ffffff;" class="fallback-text-m">
<font face="'Montserrat', Arial">From</font>
</td>
</tr>
<tr>
<td style="padding:0px 20px 42px 20px; font-family:'Roboto', Arial; font-weight:900; font-size:25.89px; line-height:38.835px; text-align:center; color:#ffffff;" class="fallback-text-r">
<font face="'Roboto', Arial">$10.99</font>
</td>
</tr>
</table>
</div>
<!--[if mso]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</table>
I am unable to center vertically all td of the table.
It looks okay(vertically centered) in 600px but in mobile devices(max-width:550px) all td of the table is not vertically centering.
I want all text to be vertically centered. How to do this? Don't use float, position:relative/absolute because I am trying to make a html newsletter that doesn't support float/position:relative/absolute.
#media only screen and (max-width:550px) {
.hp {width:100%!important; height:auto!important;}
.mob-column {float:none!important; width:100%!important; display:block!important;}
}
<table width="600" class="hp" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="33.33%" height="192" class="mob-column" align="left"
style="width:33.33%; height:192px; background-image:url('https://via.placeholder.com/200X192.jpg'); background-repeat:no-repeat; background-size:100% 100%;"
bgcolor="#000080">
<!--[if (gte mso 9)|(IE)]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" width="33.33%" align="left" fill="true" stroke="false" style="width:33.33%; height:192px; background-image:url('https://via.placeholder.com/200X192.jpg'); background-repeat:no-repeat; background-size:100% 100%;" class="mob-column">
<v:fill type="cover" src="images/chicken-food.jpg" color="#000080"/>
<v:textbox style="mso-fit-shape-to-text:true;" inset="0,0,0,0">
<![endif]-->
<table width="100%" class="hp" border="0" cellspacing="0" cellpadding="0"
style="text-align:center; color:#ffffff;">
<tr>
<td
style="padding:0px 20px 32px 20px; font-family:'Roboto', Arial; font-weight:900; font-size:15.43px; text-transform:uppercase; line-height:150%; word-spacing:0px; letter-spacing:0px;">
<span class="fallback-text">Chicken Food</span></td>
</tr>
<tr>
<td
style="color:#cac8c6; font-family:'Montserrat', Arial; font-weight:900; font-size:10.29px; line-height:150%; word-spacing:0px; letter-spacing:0px;">
<span class="fallback-text">From</span></td>
</tr>
<tr>
<td
style="padding:0px 20px 0px 20px; font-family:'Roboto', Arial; font-weight:900; font-size:25.89px; line-height:150%; word-spacing:0px; letter-spacing:0px;">
<span class="fallback-text">$10.99</span></td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
<td width="33.33%" height="192" class="mob-column" align="left"
style="width:33.33%; height:192px; background-image:url('https://via.placeholder.com/200X192.jpg'); background-repeat:no-repeat; background-size:100% 100%;"
bgcolor="#000080">
<!--[if (gte mso 9)|(IE)]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" width="33.33%" align="left" fill="true" stroke="false" style="width:33.33%; height:192px; background-image:url('https://via.placeholder.com/200X192.jpg'); background-repeat:no-repeat; background-size:100% 100%;" class="mob-column">
<v:fill type="cover" src="images/pizza-specials.jpg" color="#000080"/>
<v:textbox style="mso-fit-shape-to-text:true;" inset="0,0,0,0">
<![endif]-->
<table width="100%" class="hp" border="0" cellspacing="0" cellpadding="0"
style="text-align:center; color:#ffffff;">
<tr>
<td
style="padding:0px 20px 32px 20px; font-family:'Roboto', Arial; font-weight:900; font-size:15.43px; text-transform:uppercase; line-height:150%; word-spacing:0px; letter-spacing:0px;">
<span class="fallback-text">Pizza Specials</span></td>
</tr>
<tr>
<td
style="color:#cac8c6; font-family:'Montserrat', Arial; font-size:10.29px; line-height:150%; word-spacing:0px; letter-spacing:0px;">
<span class="fallback-text">From</span></td>
</tr>
<tr>
<td
style="padding:0px 20px 0px 20px; font-family:'Roboto', Arial; font-weight:900; font-size:25.89px; line-height:150%; word-spacing:0px; letter-spacing:0px;">
<span class="fallback-text">$10.99</span></td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
<td width="33.33%" height="192" class="mob-column" align="left"
style="width:33.33%; height:192px; background-image:url('https://via.placeholder.com/200X192.jpg'); background-repeat:no-repeat; background-size:100% 100%;"
bgcolor="#000080">
<!--[if (gte mso 9)|(IE)]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" width="33.33%" align="left" fill="true" stroke="false" style="width:33.33%; height:192px; background-image:url('https://via.placeholder.com/200X192.jpg'); background-repeat:no-repeat; background-size:100% 100%;" class="mob-column">
<v:fill type="cover" src="images/precious-wine.jpg" color="#000080"/>
<v:textbox style="mso-fit-shape-to-text:true;" inset="0,0,0,0">
<![endif]-->
<table width="100%" class="hp" border="0" cellspacing="0" cellpadding="0"
style="text-align:center; color:#ffffff;">
<tr>
<td
style="padding:0px 20px 32px 20px; font-family:'Roboto', Arial; font-weight:900; font-size:15.43px; text-transform:uppercase; line-height:150%; word-spacing:0px; letter-spacing:0px;">
<span class="fallback-text">Precious Wine</span></td>
</tr>
<tr>
<td
style="color:#cac8c6; font-family:'Montserrat', Arial; font-size:10.29px; line-height:150%; word-spacing:0px; letter-spacing:0px;">
<span class="fallback-text">From</span></td>
</tr>
<tr>
<td
style="padding:0px 20px 0px 20px; font-family:'Roboto', Arial; font-weight:900; font-size:25.89px; line-height:150%; word-spacing:0px; letter-spacing:0px;">
<span class="fallback-text">$10.99</span></td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</table>
I have a table within a table and the table inside is not centering for some reason. I can't figure out why, maybe the VML is messing with it somehow? The h3 tag above the table seems to center just fine. I have the background of the table to be blue just so I can see it clearer. Here's my email template:
<body>
<div style="text-align: center; padding: -8px; font-family: brandon-grotesque-regular, Lato, sans-serif;">
<table style="width: 100%; text-align: center;" cellpadding="0" cellspacing="0" border="0" align="center">
<tbody>
<tr style="text-align: center;">
<td align="center" bgcolor="#ffffff" background="http://f52c38c7.ngrok.io/y6_warrior_challenge_email/images/bg_y6.png" valign="top" style="background-image: url('http://f52c38c7.ngrok.io/y6_warrior_challenge_email/images/bg_y6.png'); background-repeat: no-repeat; background-position: center; background-size: contain; background-color: #ffffff; text-align: center; align: center;" width="680" height="960">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width: 510pt; height:720pt;">
<v:fill type="frame" src="https://image.freepik.com/free-vector/elegant-white-texture-background_23-2148431731.jpg" color="#ffffff" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="padding: 48px;">
<tbody>
<tr>
<td align="center" style="text-align: center;">
<h3 style="color: #043d52; font-size: 32px; font-weight: bolder; padding: 32px 0 32px 0; margin: 0">
this is text
</h3>
<center>
<table align="center" style="background: blue; text-align: center;">
<tbody>
<tr>
<td valign="middle" style="vertical-align: middle !important; padding: 0; text-align: center;">
<img style="max-height: 145px; width: 100%;" alt="Shirt image" src="https://i.picsum.photos/id/350/536/354.jpg">
</td>
<td valign="middle" style="vertical-align: middle !important; padding: 0; text-align: center;">
<img style="max-height: 79px; width: 100%;" alt="Hat image" src="https://i.picsum.photos/id/350/536/354.jpg">
</td>
<td valign="middle" style="vertical-align: middle !important; padding: 0; text-align: center;">
<img style="max-height: 139px;" alt="Water bottle image" src="https://i.picsum.photos/id/350/536/354.jpg">
</td>
<td valign="middle" style="vertical-align: middle !important; padding: 0; text-align: center;">
<img style="max-height: 136px; width: 100%;" alt="Hoodie image" src="https://i.picsum.photos/id/350/536/354.jpg">
</td>
</tr>
<tr>
<td valign="top" style="vertical-align: top !important; padding: 0; text-align: center;">
<p style="color: #676767; font-weight: bolder;">text</p>
</td>
<td valign="top" style="vertical-align: top !important; padding: 0; text-align: center;">
<p style="color: #676767; font-weight: bolder;">text</p>
</td>
<td valign="top" style="vertical-align: top !important; padding: 0; text-align: center;">
<p style="color: #676767; font-weight: bolder;">text</p>
</td>
<td valign="top" style="vertical-align: top !important; padding: 0; text-align: center;">
<p style="color: #676767; font-weight: bolder;">text</p>
</td>
</tr>
</tbody>
</table>
</center>
</td>
</tr>
</tbody>
</table>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
</body>
This is what it looks like in Outlook 365:
I highlighted the background to be gray so you can see it clearer, but the blue table is definitely not centered. I even tried using the <center> tag but it's still not working.
I'm using the image as a background in my HTML-email, to get the ability to allocate text and button over the top layer of the image and it is working fine for every email client beside the MS Outlook 2013 on Windows 7.
For some reason, once the user got the email and click on the button (or wherever image area) there is weird frame appears around the image and that frame looks like user can edit that image (rotate or resize), but he can't, it's just a frame.
I can't figure out how can I get rid of that frame. Another problem is the Litmus doesn't show any issue with the code so it's kina like impossible to fix without actual sending. Please help!
Using all header as one image isn't an option because the client requires the ability to change the text over himself.
Below the part of the code for the header only but here is the link on the code of the entire email https://pastebin.com/edYR2eVm and the Litmus project https://litmus.com/builder/da4ef27
<!-- HERO : BEGIN -->
<tr>
<!-- Bulletproof Background Images c/o https://backgrounds.cm -->
<td background="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSYiUYrvVY_LbHtpJf-iiBrk_3BXOwqHyulAj0sDk3gJKOxAl6FkA" bgcolor="#222222" align="center" valign="top" style="text-align: center; background-position: center center !important; background-size: cover !important;">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:680px; height:380px; background-position: center center !important;">
<v:fill type="tile" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSYiUYrvVY_LbHtpJf-iiBrk_3BXOwqHyulAj0sDk3gJKOxAl6FkA" color="#222222" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<div>
<!--[if mso]>
<table role="presentation" border="0" cellspacing="0" cellpadding="0" align="center" width="500">
<tr>
<td align="center" valign="middle" width="500">
<![endif]-->
<table role="presentation" border="0" cellpadding="0" cellspacing="0" align="center" width="100%" style="max-width:500px; margin: auto;">
<tr>
<td height="20" style="font-size:20px; line-height:20px;"> </td>
</tr>
<tr>
<td align="center" valign="middle">
<table>
<tr>
<td valign="top" style="text-align: center; padding: 60px 0 10px 20px;">
<h1 style="margin: 0; font-family: 'Montserrat', sans-serif; font-size: 30px; line-height: 36px; color: #ffffff; font-weight: bold;">WELCOME %%FIRST NAME%%</h1>
</td>
</tr>
<tr>
<td valign="top" style="text-align: center; padding: 10px 20px 15px 20px; font-family: sans-serif; font-size: 15px; line-height: 20px; color: #fff;">
<p style="margin: 0;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore.</p>
</td>
</tr>
<tr>
<td valign="top" align="center" style="text-align: center; padding: 15px 0px 60px 0px;">
<!-- Button : BEGIN -->
<center>
<table role="presentation" align="center" cellspacing="0" cellpadding="0" border="0" class="center-on-narrow" style="text-align: center;">
<tr>
<td style="border-radius: 50px; background: #26a4d3; text-align: center;" class="button-td">
<a href="http://www.google.com" style="background: #26a4d3; border: 15px solid #26a4d3; font-family: 'Montserrat', sans-serif; font-size: 14px; line-height: 1.1; text-align: center; text-decoration: none; display: block; border-radius: 50px; font-weight: bold;" class="button-a">
<span style="color:#ffffff;" class="button-link"> ACCESS ACCOUNT </span>
</a>
</td>
</tr>
</table>
</center>
<!-- Button : END -->
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="20" style="font-size:20px; line-height:20px;"> </td>
</tr>
</table>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
<!-- HERO : END -->
I am doing a newsletter where most of the recipients will use outlook and I have encountered 2 major problems.
First that depending on a computer I get a differently displayed image like in the screenshots:
When I change the width value of the image to 750 it works on my computer but is too wide on my colleagues': https://i.stack.imgur.com/QZxLf.png
Reversed situation happens when I change the value to 600(how it should be) it's too narrow for me and perfect for her: https://i.stack.imgur.com/aFPGo.
here is the code:
<table class="baemail320resize" align="center" border="0" cellpadding="" cellspacing="0" style="height:350; max-height: 350px; max-width:600px; border-bottom: none!important;border-right: none !important;" width="600" height="350">
<tr>
<td bgcolor="#333333" height="350" background="http://img.anpdm.com/BalticDevelopmentForum/background-100.jpg" style="display:block; background-repeat: no-repeat; padding: 0;" valign="middle;" width="auto"><!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width: 600px; height: 350px;">
<v:fill type="tile" src="http://img.anpdm.com/BalticDevelopmentForum/background-100.jpg" color="#333333" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<table class="baemail320resize" valign="middle" align="center" border="0" cellpadding="" cellspacing="15" style="height:350px; vertical-align:middle; max-height: 350px; max-width:600px; border-bottom: none; border-right: none ;" width="600">
<tr>
<td></td>
</tr>
<tr>
<td align="center" href="www.bdforum.org" ><img align="center" alt="LOGO" height="47px" href="www.bdforum.org" src="http://img.anpdm.com/BalticDevelopmentForum/Asset-2.png" style="display:block;" width="88px"></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td align="center" valign="middle"><font style="font-weight:none;font-family:Arial, Helvetica, sans-serif; font-size: 12px; color: #ffffff ;text-decoration:none; ">
<anpa href="##TellAFriend##" style="color: #fffff6 ; text-decoration:none;">FORWARD </anpa>
<anpa href="http://www.anpdm.com/form/4743504075464B5943/414358407446455F4571" style="color: #fffff6 ; text-decoration:none;text-align: center;">SUBSCRIBE </anpa>
<anpa href="##OptOutAll##" style="color: #fffff6; text-decoration:none;">UNSUBSCRIBE</anpa>
<br>
</font></td>
</tr>
<tr>
<td align="center" valign="middle" width="600" style="padding: 1em;"><font style="font-weight:none;font-family:Arial, Helvetica, sans-serif; font-size: 20px; color: #ffffff !important;">
<anpa href="http://www.bdforum.org" style="color: #fffff6;">BALTIC DEVELOPMENT FORUM</anpa>
</font></td>
</tr>
<tr>
<td align="center" style="font-weight:none;font-family:Arial, Helvetica, sans-serif; font-size: 12px; color: #ffffff !important; ">LATEST BDF NEWS ESPECIALLY FOR YOU</td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td align="center"><table role="presentation" aria-hidden="true" cellspacing="0" cellpadding="0" border="0" align="center" width="160" style="margin: auto;">
<tr>
<td style="border-radius: 30px; background: #d1003e; text-align: center;"> <span style="color:#ffffff;">WEBSITE</span> </td>
</tr>
</table></td>
</tr>
</table>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]--></td>
</tr>
<tr>
<td><img src="http://customers.anpdm.com/shared/images/pixel.gif" width="1" height="20" style="display:block;"></td>
</tr>
</table>
Moreover, there is another case with a social media panel for the newsletter where it works on mine (it keeps the width as I set it in the code):
https://i.stack.imgur.com/iWbIn.png
but does not on hers(its too wide and the icons grow):
https://i.stack.imgur.com/NM0pS.png
the code:
<table class="baemail320resize" align="center" border="0" cellpadding="" cellspacing="0" style="max-height:60px; max-width:600px; border-bottom: none!important;border-right: none !important;" width="600" height="auto">
<tr>
<td><table class="baemail320resize" valign="middle" align="center" border="0" cellpadding="" cellspacing="0" style="max-height:60px; vertical-align:middle; max-width:600px; border-bottom: none; border-right: none ;" width="600">
<tr>
<td align="center" valign="middle" class="baemailwidthcollapse"><img src="http://customers.anpdm.com/shared/images/pixel.gif" align="center" link="" height="1" width="20" style="max-height:1; max-width: 20px;"></td>
<!-- EMPTY -->
<td align="center" valign="middle" href="https://www.facebook.com/bdforum.org"><img src="http://img.anpdm.com/BalticDevelopmentForum/Asset1x3.png" href="https://www.facebook.com/bdforum.org" link="https://www.facebook.com/bdforum.org" alt="FACEBOOK" align="center" height="auto" width="45%" style="max-height:60px; max-width: 60px;"></td>
<!-- FACEBOOK -->
<td align="center" valign="middle" href="https://twitter.com/bdforumorg"><img src="http://img.anpdm.com/BalticDevelopmentForum/Asset2x3.png" href="https://twitter.com/bdforumorg" link="https://twitter.com/bdforumorg" alt="TWITTER" align="center" height="auto" width="45%" style="max-height:60px; max-width: 60px;"></td>
<!-- TWITTER -->
<td align="center" valign="middle" href="https://www.youtube.com/user/balticdevforum"><img src="http://img.anpdm.com/BalticDevelopmentForum/Asset3x3.png" href="https://www.youtube.com/user/balticdevforum" link="https://www.youtube.com/user/balticdevforum" alt="YOU TUBE" align="center" height="auto" width="45%" style="max-height:60px; max-width: 60px;"></td>
<!-- YOU TUBE -->
<td align="center" valign="middle" href="https://www.flickr.com/photos/baltic-development-forum"><img src="http://img.anpdm.com/BalticDevelopmentForum/Asset4x3.png" href="https://www.flickr.com/photos/baltic-development-forum" link="https://www.flickr.com/photos/baltic-development-forum" alt="FLICKR" align="center" height="auto" width="45%" style="max-height:60px; max-width: 60px;"></td>
<!-- FLICKR -->
<td align="center" valign="middle" href="https://www.linkedin.com/company/baltic-development-forum"><img src="http://img.anpdm.com/BalticDevelopmentForum/Asset5x3.png" href="https://www.linkedin.com/company/baltic-development-forum" link="https://www.linkedin.com/company/baltic-development-forum" alt="LINKED IN" align="center" height="auto" width="45%" style="max-height:60px; max-width: 60px;"></td>
<!-- LINKED IN -->
<td align="center" valign="middle" class="baemailwidthcollapse"><img src="http://customers.anpdm.com/shared/images/pixel.gif" align="center" link="" height="1" width="20" style="max-height:1; max-width: 20px;"></td>
<!-- EMPTY -->
</tr>
</table>
<tr>
<td><img src="http://customers.anpdm.com/shared/images/pixel.gif" width="1" height="20" style="display:block;"></td>
</tr>
</td>
</tr>
</table>
I would appreciate every little hint or idea on how to get rid of those problems, I believe I have tried everything I am capable of already especially that it works everywhere but some outlook PC clients as yo can see here.
Sorry for a long post and thank you for help in advance!
Outlook doesn't really like it if you run an image dramatically smaller in width than your actual desired output. I could not get your image to tile in the background of the table cell.
Your background code is a bit messed up. I cleaned it up a bit. Try this instead:
<!--[if gte mso 9]>
<v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
<v:fill type="tile" src="http://img.anpdm.com/BalticDevelopmentForum/background-100.jpg" color="#333333" />
</v:background>
<![endif]-->
Try something like this instead:
<div style="background-color:#ff0000;">
<!--[if gte mso 9]>
<v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
<v:fill type="tile" src="http://www.gwally.com/news/photos/catintinfoilhat.jpg" color="#7bceeb"/>
</v:background>
<![endif]-->
<table height="100%" width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td valign="top" align="left" background="http://www.gwally.com/news/photos/catintinfoilhat.jpg">
</td>
</tr>
</table>
</div>
Try formatting your image with this tool: https://backgrounds.cm/
Also, you didn't include your <head> information like style sheet and meta tags.
Your table structure as you present it is not very responsive. Half of the email is cut off in IOS devices.
Finally, the maximum size for Outlook is 800px. The closer you come to that width, the more problems you will have with different versions of Outlook.
Good luck.