I am trying build my first HTML email. I want the masthead graphic to be flush against the edge of the cell but there is a small white border that I can seem to get rid of. What can be done about this?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
http//www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
</head>
<body>
<!-- Wrapper (pseudo body tag) -->
<table border="1" align="center" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="center" valign="top" width="100%">
<!--Body Table-->
<table border="0" bgcolor="black" cellpadding="10" cellspacing="0" width="">
<tbody>
<tr>
<td align="center" valign="top" width="">
<!--Content Table-->
<table border="0" bgcolor="white" cellpadding="0" cellspacing="0" width="">
<tbody>
<tr>
<td lign="center" valign="top" width="">
<table border="0" bgcolor="white" cellpadding="" width="">
<tbody>
<tr>
<td align="center" valign="top" width="">
<img src="https://docs.google.com/uc?id=0B3ruYAyZeJR3clo3dmJUbW5Ya1E" vspace="0" hspace="0">
</td>
</tr>
</tbody>
</table>
<table border="1" bgcolor="white" align="center" cellpadding="" cellspacing="0" width="600">
<tbody>
<tr>
<td align="center" valign="top" width="600">
<p>subhead</p>
</td>
</tr>
<tr>
<td align="center" valign="top" width="600">
<p>divider</p>
</td>
</tr> <tr>
<td align="center" valign="top" width="600">
<p>Story</p>
</td>
</tr>
<tr>
<td align="center" valign="top" width="600">
<p>Picture</p>
</td>
</tr>
<tr>
<td align="center" valign="top" width="600">
<p>divider</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!--End Content Table-->
<!--Footer Table-->
<table border="1" cellpadding="0" cellspacing="0" width="600">
<tbody>
<tr>
<td style="color:white" align="center" valign="top" width="">
<p>footer1</p>
</td>
</tr>
<tr>
<td style="color:white" align="center" valign="top" width="">
<p>footer2</p>
</td>
</tr>
</tbody>
</table>
<!--End Footer Table-->
</td>
</tr>
</tbody>
</table>
<!--End Body Table-->
</td>
</tr>
</tbody>
</table>
</body>
</html>
First remove the margin from the page by adding style="border: 0px" then add cellspacing and cellpadding to the table and all parent tables.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
http//www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
</head>
<body style="margin:0px">
<!-- Wrapper (pseudo body tag) -->
<table border="1" align="center" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="center" valign="top" cellpadding="0" cellspacing="0" width="100%">
<!--Body Table-->
<table border="0" bgcolor="black" cellpadding="0" cellspacing="0" width="">
<tbody>
<tr>
<td align="center" valign="top" width="">
<!--Content Table-->
<table border="0" bgcolor="white" cellpadding="0" cellspacing="0" width="">
<tbody>
<tr>
<td lign="center" valign="top" width="">
<table border="0" bgcolor="white" cellpadding="0" cellspacing="0" width="">
<tbody>
<tr>
<td align="center" valign="top" width="">
<img src="https://docs.google.com/uc?id=0B3ruYAyZeJR3clo3dmJUbW5Ya1E" vspace="0" hspace="0">
</td>
</tr>
</tbody>
</table>
<table border="1" bgcolor="white" align="center" cellpadding="" cellspacing="0" width="600">
<tbody>
<tr>
<td align="center" valign="top" width="600">
<p>subhead</p>
</td>
</tr>
<tr>
<td align="center" valign="top" width="600">
<p>divider</p>
</td>
</tr> <tr>
<td align="center" valign="top" width="600">
<p>Story</p>
</td>
</tr>
<tr>
<td align="center" valign="top" width="600">
<p>Picture</p>
</td>
</tr>
<tr>
<td align="center" valign="top" width="600">
<p>divider</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!--End Content Table-->
<!--Footer Table-->
<table border="1" cellpadding="0" cellspacing="0" width="600">
<tbody>
<tr>
<td style="color:white" align="center" valign="top" width="">
<p>footer1</p>
</td>
</tr>
<tr>
<td style="color:white" align="center" valign="top" width="">
<p>footer2</p>
</td>
</tr>
</tbody>
</table>
<!--End Footer Table-->
</td>
</tr>
</tbody>
</table>
<!--End Body Table-->
</td>
</tr>
</tbody>
</table>
</body>
</html>
I have made a few changes to your table. Removed table borders so the tables dont show the borders around every cell and the table itself. Also all images need to have style="display:block" so there is no extra spaces around it.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
http//www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
</head>
<body>
<!-- Wrapper (pseudo body tag) -->
<table border="1" align="center" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="center" valign="top" width="100%">
<!--Body Table-->
<table border="0" bgcolor="black" cellpadding="10" cellspacing="0" width="">
<tbody>
<tr>
<td align="center" valign="top" width="">
<!--Content Table-->
<table border="0" bgcolor="white" cellpadding="0" cellspacing="0" width="">
<tbody>
<tr>
<td lign="center" valign="top" width="">
<table width="" border="0" cellpadding="" cellspacing="0" bgcolor="black">
<tbody>
<tr>
<td align="center" valign="top" width="">
<img src="https://docs.google.com/uc?id=0B3ruYAyZeJR3clo3dmJUbW5Ya1E" vspace="0" hspace="0" style="display:block;">
</td>
</tr>
</tbody>
</table>
<table border="0" bgcolor="white" align="center" cellpadding="" cellspacing="0" width="600">
<tbody>
<tr>
<td align="center" valign="top" width="600">
<p>subhead</p>
</td>
</tr>
<tr>
<td align="center" valign="top" width="600">
<p>divider</p>
</td>
</tr> <tr>
<td align="center" valign="top" width="600">
<p>Story</p>
</td>
</tr>
<tr>
<td align="center" valign="top" width="600">
<p>Picture</p>
</td>
</tr>
<tr>
<td align="center" valign="top" width="600">
<p>divider</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!--End Content Table-->
<!--Footer Table-->
<table border="0" cellpadding="0" cellspacing="0" width="600">
<tbody>
<tr>
<td style="color:white" align="center" valign="top" width="">
<p>footer1</p>
</td>
</tr>
<tr>
<td style="color:white" align="center" valign="top" width="">
<p>footer2</p>
</td>
</tr>
</tbody>
</table>
<!--End Footer Table-->
</td>
</tr>
</tbody>
</table>
<!--End Body Table-->
</td>
</tr>
</tbody>
</table>
</body>
</html>
Let me know if this helps.
You need to add:
cellpadding="0" cellspacing="0" border="0"
to all of your tables (unless you're intentionally adding cellpadding etc) - that gets rid of the extra spacing.
Then you should also set all images to have an inline style of display:block;
I just tested that, and it got rid of the extra spacing :)
Related
I'm working on some code written by someone else and I have a 3 block element that I need to change.
I'm trying to change the first block height to only goes as big as the image is.
I can't find any way of controlling the height of the blocks and can't figured out what is setting up the height.
If you have any suggestions please help.
Thanks!
<!--[if mso]><table border="0" cellpadding="0" cellspacing="0" align="left" style="mso-table-lspace:0pt; mso-table-rspace:0pt; border-collapse: collapse; width: 100%"><tr><td style="width: 100%;"><![endif]-->
<div style="float: left; width: 100%" class="sapMktBlock">
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="min-width:100%;" bgcolor="#FFFFFF">
<tbody>
<tr>
<td style="font-size:0px" class="nomob"> </td>
<td width="640" align="center" style="width:640px;min-width:640px;" class="wrapto320px">
<table role="presentation" width="100%" border="0" cellspacing="0" cellpadding="0" style="min-width:100%; " class="wrapto320px">
<tbody>
<tr>
<td align="left">
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<th bgcolor="red" class="colsplit" style="width:213px;vertical-align: top;">
<table width="100%" style="min-width:100%;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="left" valign="top" style="padding:0px 0px 0px 0px;">
<img src="https://i1.adis.ws/i/thebodyshop/UK_trigger_WelcomeCJ_Day0_GroupADiscount_story_1976" width="213" height="auto" style="display:block;height:auto;" class="nomob" alt="1976">
<div style="width:0; overflow:hidden; float:left; display:none; max-height:0px; mso-hide:all;" class="show">
<img src="https://i1.adis.ws/i/thebodyshop/UK_trigger_WelcomeCJ_Day0_GroupADiscount_story_1976mob" width="1" style="display:block;" class="wrapto100pc" alt="1976">
</div>
</td>
</tr>
<tr>
<td align="center" valign="top">
<table width="100%" style="min-width:100%;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="left" valign="top" style="padding:0px 20px 10px 20px;">
<table width="100%" style="min-width:100%;" border="0" cellspacing="0" cellpadding="0">
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</th>
<th bgcolor="#f8f3e8" class="colsplit" style="width:213px;vertical-align: top;">
<table width="100%" style="min-width:100%;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="left" valign="top" style="padding:0px 0px 0px 0px;">
<img src="https://i1.adis.ws/i/thebodyshop/UK_trigger_WelcomeCJ_Day0_GroupADiscount_story_1996" width="213" height="auto" style="display:block;height:auto;" class="nomob" alt="1996">
<div style="width:0; overflow:hidden; float:left; display:none; max-height:0px; mso-hide:all;" class="show">
<img src="https://i1.adis.ws/i/thebodyshop/UK_trigger_WelcomeCJ_Day0_GroupADiscount_story_1996mob" width="1" style="display:block;" class="wrapto100pc" alt="1996">
</div>
</td>
</tr>
<tr>
<td align="center" valign="top" class="mobheightclear">
<table width="100%" style="min-width:100%;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="left" valign="top" style="padding:20px 20px 0px 20px;">
<table width="100%" style="min-width:100%;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="center" style="padding:0px 0px 10px 0px; font-family:Helvetica, Arial, sans-serif;font-size:14px;line-height:20px;color:#004236;" class="textcenter">
We launch our Against Animal Testing campaign.
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="center" valign="top">
<table width="100%" style="min-width:100%;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="left" valign="top" style="padding:0px 20px 10px 20px;">
<table width="100%" style="min-width:100%;" border="0" cellspacing="0" cellpadding="0">
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</th>
<th bgcolor="#f8f3e8" class="colsplit" style="width:213px;vertical-align: top;">
<table width="100%" style="min-width:100%;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="left" valign="top" style="padding:0px 0px 0px 0px;">
<img src="https://i1.adis.ws/i/thebodyshop/UK_trigger_WelcomeCJ_Day0_GroupADiscount_story_1998" width="213" height="auto" style="display:block;height:auto;" class="nomob" alt="1998">
<div style="width:0; overflow:hidden; float:left; display:none; max-height:0px; mso-hide:all;" class="show">
<img src="https://i1.adis.ws/i/thebodyshop/UK_trigger_WelcomeCJ_Day0_GroupADiscount_story_1998mob" width="1" style="display:block;" class="wrapto100pc" alt="1998">
</div>
</td>
</tr>
<tr>
<td align="center" valign="top" class="mobheightclear">
<table width="100%" style="min-width:100%;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="left" valign="top" style="padding:20px 20px 0px 20px;">
<table width="100%" style="min-width:100%;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="center" style="padding:0px 0px 10px 0px; font-family:Helvetica, Arial, sans-serif;font-size:14px;line-height:20px;color:#004236;" class="textcenter">
We celebrate 50 years of human rights with Amnesty International.
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="center" valign="top">
<table width="100%" style="min-width:100%;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="left" valign="top" style="padding:0px 20px 10px 20px;">
<table width="100%" style="min-width:100%;" border="0" cellspacing="0" cellpadding="0">
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</th>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
<td style="font-size:0px" class="nomob"> </td>
</tr>
</tbody>
</table>
</div>
<!--[if mso]></td></tr></table><![endif]-->
You can't change the height of the first block(the red one) as it is a cell in the row of a table. You'll probably have to use <div> element to manipulate the height factor.
Refer to this post for more details Change Height of a <td> without affecting the whole row height
Also, If your primary concern is the whitespace below the image in the first block, you can either 1) add some content below or 2) remove the "vertical-align: top;" inline-css property of the red block's <th> tag, which will align your image at the center of the cell.
Hope this helps!
I am making a HTML email. Now in browser it is showing fine and how it should be. The problem appears when I sent it and check on different platforms.
How ever, in the email from transip where I host my website it shows as it should.
I got a jsfiddle here
how it should be:
Gmail:
Windows 10 mail:
Here is all the code that I paste in the email.
<!DOCTYPE html>
<html>
<head>
<!-- NAME: 1:2 COLUMN - FULL WIDTH -->
<!--[if gte mso 15]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
<meta charset="UTF-8">
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<meta content="width=device-width, initial-scale=1" name="viewport">
<title>*|MC:SUBJECT|*</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<script src="https://use.typekit.net/pyo8wnx.js">
</script>
<script>
try{Typekit.load({ async: true });}catch(e){}
</script>
</head>
<body>
<center>
<table align="center" border="0" cellpadding="0" cellspacing="0" id="bodyTable" width="100%">
<tr>
<td align="center" id="bodyCell" valign="top">
<!-- BEGIN TEMPLATE // -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr class="f1f1f1">
<td align="center" id="templateHeader" valign="top"><!--[if gte mso 9]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600" style="width:600px;">
<tr>
<td align="center" valign="top" width="600" style="width:600px;">
<![endif]--></td>
</tr>
</table>
<table align="center" border="0" cellpadding="0" cellspacing="0" class="templateContainer" width="100%">
<tr>
<td class="headerContainer" valign="top">
<table border="0" cellpadding="0" cellspacing="0" class="mcnImageBlock" style="min-width:100%;" width="100%">
<tbody class="mcnImageBlockOuter">
<tr>
<td class="mcnImageBlockInner" valign="top">
<table align="left" border="0" cellpadding="0" cellspacing="0" class="mcnImageContentContainer" style="min-width:100%;" width="100%">
<tbody>
<tr>
<td class="mcnImageContent" style="padding-right: 9px; padding-left: 9px; padding-top: 0; padding-bottom: 0; text-align:center;" valign="top"><img align="center" alt="" class="mcnImage" src="https://gallery.mailchimp.com/953c1f15f29edc16163af3d3e/images/d02fceaa-c0cb-45a3-a6d5-5f56aaa98b6b.jpg" style="max-width:1360px; padding-bottom: 0; display: inline !important; vertical-align: bottom;" width="564"></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table><!--[if gte mso 9]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<tr>
<td align="center" id="templateBody" valign="top">
<!--[if gte mso 9]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600" style="width:600px;">
<tr>
<td align="center" valign="top" width="600" style="width:600px;">
<![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" class="templateContainer" width="100%">
<tr>
<td class="bodyContainer" valign="top">
<table border="0" cellpadding="0" cellspacing="0" class="mcnTextBlock" style="min-width:100%;" width="100%">
<tbody class="mcnTextBlockOuter">
<tr>
<td class="mcnTextBlockInner" style="padding-top:0px;" valign="top">
<!--[if mso]>
<table align="left" border="0" cellspacing="0" cellpadding="0" width="100%" style="width:100%;">
<tr>
<![endif]-->
<!--[if mso]>
<td valign="top" width="600" style="width:600px;">
<![endif]-->
<table align="left" border="0" cellpadding="0" cellspacing="0" class="mcnTextContentContainer templateContainerf1-shadow" style="max-width:100%; min-width:100%;" width="100%">
<tbody>
<tr>
<td class="mcnTextContent" style="padding: 9px 18px 9px; font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;" valign="top">
<h1><span style="font-size:18px">Beste vrienden van Funda</span></h1>
<p style="font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;"><span style="font-size:13px">Als jullie parners in print, feliciteren wij jullie met het <strong>15 jarig</strong> bestaan. Bij een verjaardag hoort natuurlijk <strong>een kado! </strong><br>
<br>
Met de code: <strong>funda15jaar</strong>. Krijg je korting op diverse producten. Deze producten zijn hieronder te vinden.<br>
<br>
Op nog vele mooie jaren.<br>
<br>
Veel liefs,</span><br>
<img data-file-id="29567" height="55" src="https://gallery.mailchimp.com/953c1f15f29edc16163af3d3e/images/42fafc76-b54e-4729-a6cf-c46d289bb936.png" style="border: 0px ; width: 200px; height: 55px; margin: 0px;" width="200"></p>
</td>
</tr>
</tbody>
</table><!--[if mso]>
</td>
<![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" class="templateContainer" width="100%">
<tr></tr>
<tbody class="mcnDividerBlockOuter">
<tr>
<td class="mcnDividerBlockInner" style="min-width: 100%; padding: 9px 18px;">
<table border="0" cellpadding="0" cellspacing="0" class="mcnDividerContent" style="min-width:100%;" width="100%">
<tbody>
<tr>
<td><span></span></td>
</tr>
</tbody>
</table><!--[if mso]>
</tr>
</table>
<![endif]-->
</td>
</tr>
</tbody>
</table>
<table align="left" border="0" cellpadding="0" cellspacing="0" class="mcnTextContentContainer" style="max-width:100%; min-width:100%;" width="100%">
<tbody>
<tr>
<td class="mcnTextContent" style="padding: 0px 18px 9px; font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;" valign="top">
<h1 class="null"><strong style="color: #054973;font-size: 13px;"><span style="font-size:18px">KORTING OP</span></strong></h1>
<h1 class="null"><span style="color:#054973"><strong>JOUW FAVORIETEN</strong></span></h1>
</td>
</tr>
</tbody>
</table><!--[if mso]>
</td>
<![endif]-->
<!--[if mso]>
</tr>
</table>
<![endif]-->
</td>
</tr>
</tbody>
</table>
<table border="0" cellpadding="0" cellspacing="0" class="mcnTextBlock" style="min-width:100%;" width="100%">
<tbody class="mcnTextBlockOuter">
<tr>
<td class="mcnTextBlockInner" style="padding-top:9px;" valign="top">
<!--[if mso]>
<table align="left" border="0" cellspacing="0" cellpadding="0" width="100%" style="width:100%;">
<tr>
<![endif]-->
<!--[if mso]>
<td valign="top" width="600" style="width:600px;">
<![endif]-->
<table align="left" border="0" cellpadding="0" cellspacing="0" class="mcnTextContentContainer" style="max-width:100%; min-width:100%;" width="100%">
<tbody>
<tr>
<td class="mcnTextContent" style="padding: 0px 18px 9px; font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;" valign="top">
<h1 class="null"><span style="font-family:open sans,helvetica neue,helvetica,arial,sans-serif"><span style="font-size:13px">We geven korting op je favorieten / meest bestelde producten.</span></span></h1>
</td>
</tr>
</tbody>
</table><!--[if mso]>
</td>
<![endif]-->
<!--[if mso]>
</tr>
</table>
<![endif]-->
</td>
</tr>
</tbody>
</table>
<table border="0" cellpadding="0" cellspacing="0" class="mcnImageBlock" style="min-width:100%;" width="100%">
<tbody class="mcnImageBlockOuter">
<tr>
<td class="mcnImageBlockInner" style="padding:0px" valign="top">
<table align="left" border="0" cellpadding="0" cellspacing="0" class="mcnImageContentContainer" style="min-width:100%;" width="100%">
<tbody>
<tr>
<td class="mcnImageContent" style="padding-right: 0px; padding-left: 0px; padding-top: 0; padding-bottom: 0;" valign="top"><img align="right" alt="" class="mcnImage" src="https://gallery.mailchimp.com/953c1f15f29edc16163af3d3e/images/24c856f7-7794-49cd-aae2-380d93df56fd.png" style="max-width:476px; padding-bottom: 0; display: inline !important; vertical-align: bottom;" width="476"></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table border="0" cellpadding="0" cellspacing="0" class="mcnImageBlock" style="min-width:100%;" width="100%">
<tbody class="mcnImageBlockOuter">
<tr>
<td class="mcnImageBlockInner" style="padding:0px" valign="top">
<table align="left" border="0" cellpadding="0" cellspacing="0" class="mcnImageContentContainer" style="min-width:100%;" width="100%">
<tbody>
<tr>
<td class="mcnImageContent" style="padding-right: 0px; padding-left: 0px; padding-top: 0; padding-bottom: 0;" valign="top"><img align="left" alt="" class="mcnImage" src="https://gallery.mailchimp.com/953c1f15f29edc16163af3d3e/images/597a9fb1-baad-40bf-adec-c637c4c6c1dd.png" style="max-width:476px; padding-bottom: 0; display: inline !important; vertical-align: bottom;" width="476"></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table border="0" cellpadding="0" cellspacing="0" class="mcnImageBlock" style="min-width:100%;" width="100%">
<tbody class="mcnImageBlockOuter">
<tr>
<td class="mcnImageBlockInner" style="padding:0px" valign="top">
<table align="left" border="0" cellpadding="0" cellspacing="0" class="mcnImageContentContainer" style="min-width:100%;" width="100%">
<tbody>
<tr>
<td class="mcnImageContent" style="padding-right: 0px; padding-left: 0px; padding-top: 0; padding-bottom: 0;" valign="top"><img align="right" alt="" class="mcnImage" src="https://gallery.mailchimp.com/953c1f15f29edc16163af3d3e/images/1d0bc62d-5f79-47d2-943c-4ada62b747f7.png" style="max-width:476px; padding-bottom: 0; display: inline !important; vertical-align: bottom;" width="476"></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table border="0" cellpadding="0" cellspacing="0" class="mcnDividerBlock" style="min-width:100%;" width="100%">
<tbody class="mcnDividerBlockOuter">
<tr>
<td class="mcnDividerBlockInner" style="min-width: 100%; padding: 9px 18px;">
<table border="0" cellpadding="0" cellspacing="0" class="mcnDividerContent" style="min-width:100%;" width="100%">
<tbody>
<tr>
<td><span></span></td>
</tr>
</tbody>
</table><!--
<td class="mcnDividerBlockInner" style="padding: 18px;">
<hr class="mcnDividerContent" style="border-bottom-color:none; border-left-color:none; border-right-color:none; border-bottom-width:0; border-left-width:0; border-right-width:0; margin-top:0; margin-right:0; margin-bottom:0; margin-left:0;" />
-->
</td>
</tr>
</tbody>
</table>
<table border="0" cellpadding="0" cellspacing="0" class="mcnTextBlock templateContainerf1" style="min-width:100%;" width="100%">
<tbody class="mcnTextBlockOuter">
<tr>
<td class="mcnTextBlockInner" style="padding-top:9px;" valign="top">
<!--[if mso]>
<table align="left" border="0" cellspacing="0" cellpadding="0" width="100%" style="width:100%;">
<tr>
<![endif]-->
<!--[if mso]>
<td valign="top" width="600" style="width:600px;">
<![endif]-->
<table align="left" border="0" cellpadding="0" cellspacing="0" class="mcnTextContentContainer" style="max-width:100%; min-width:100%;" width="100%">
<tbody>
<tr>
<td class="mcnTextContent" style="padding: 0px 18px 9px; font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;" valign="top">
<h1 class="null"><strong style="color: #054973;font-size: 13px;"><span style="font-size:18px">PRODUCTEN</span></strong></h1>
<h1 class="null"><span style="color:#054973"><strong>OM TE PROBEREN</strong></span></h1>
</td>
</tr>
</tbody>
</table><!--[if mso]>
</td>
<![endif]-->
<!--[if mso]>
</tr>
</table>
<![endif]-->
</td>
</tr>
</tbody>
</table>
<table border="0" cellpadding="0" cellspacing="0" class="mcnTextBlock templateContainerf1" style="min-width:100%;" width="100%">
<tbody class="mcnTextBlockOuter">
<tr>
<td class="mcnTextBlockInner" style="padding-top:9px;" valign="top">
<!--[if mso]>
<table align="left" border="0" cellspacing="0" cellpadding="0" width="100%" style="width:100%;">
<tr>
<![endif]-->
<!--[if mso]>
<td valign="top" width="600" style="width:600px;">
<![endif]-->
<table align="left" border="0" cellpadding="0" cellspacing="0" class="mcnTextContentContainer" style="max-width:100%; min-width:100%;" width="100%">
<tbody>
<tr>
<td class="mcnTextContent" style="padding: 0px 18px 9px; font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;" valign="top">
<h1 class="null" style="text-align: justify;"><span style="font-family:open sans,helvetica neue,helvetica,arial,sans-serif"><span style="font-size:13px">We geven ook korting op een aantal producten die je nooit heb besteld. Zo kan je deze ook een keer proberen. </span></span></h1>
</td>
</tr>
</tbody>
</table><!--[if mso]>
</td>
<![endif]-->
<!--[if mso]>
</tr>
</table>
<![endif]-->
</td>
</tr>
</tbody>
</table>
<table border="0" cellpadding="0" cellspacing="0" class="mcnImageBlock templateContainerf1" style="min-width:100%;" width="100%">
<tbody class="mcnImageBlockOuter">
<tr>
<td class="mcnImageBlockInner" style="padding:0px" valign="top">
<table align="left" border="0" cellpadding="0" cellspacing="0" class="mcnImageContentContainer" style="min-width:100%;" width="100%">
<tbody>
<tr>
<td class="mcnImageContent" style="padding-right: 0px; padding-left: 0px; padding-top: 0; padding-bottom: 0;" valign="top"><img align="right" alt="" class="mcnImage" src="https://gallery.mailchimp.com/953c1f15f29edc16163af3d3e/images/1d228701-15a0-48dc-aca9-e1be72269baa.png" style="max-width:479px; padding-bottom: 0; display: inline !important; vertical-align: bottom;" width="479"></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table border="0" cellpadding="0" cellspacing="0" class="mcnImageBlock templateContainerf1" style="min-width:100%;" width="100%">
<tbody class="mcnImageBlockOuter">
<tr>
<td class="mcnImageBlockInner" style="padding:0px" valign="top">
<table align="left" border="0" cellpadding="0" cellspacing="0" class="mcnImageContentContainer" style="min-width:100%;" width="100%">
<tbody>
<tr>
<td class="mcnImageContent" style="padding-right: 0px; padding-left: 0px; padding-top: 0; padding-bottom: 0;" valign="top"><img align="left" alt="" class="mcnImage" src="https://gallery.mailchimp.com/953c1f15f29edc16163af3d3e/images/a2766025-a96d-4467-9c6d-b65c6eca5292.png" style="max-width:479px; padding-bottom: 0; display: inline !important; vertical-align: bottom;" width="479"></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table border="0" cellpadding="0" cellspacing="0" class="mcnImageBlock templateContainerf1" style="min-width:100%;" width="100%">
<tbody class="mcnImageBlockOuter">
<tr>
<td class="mcnImageBlockInner" style="padding:0px" valign="top">
<table align="left" border="0" cellpadding="0" cellspacing="0" class="mcnImageContentContainer" style="min-width:100%;" width="100%">
<tbody>
<tr>
<td class="mcnImageContent" style="padding-right: 0px; padding-left: 0px; padding-top: 0; padding-bottom: 0;" valign="top"><img align="right" alt="" class="mcnImage" src="https://gallery.mailchimp.com/953c1f15f29edc16163af3d3e/images/b03d1c00-b399-4882-b3ef-32fe5e0c354d.png" style="max-width:479px; padding-bottom: 0; display: inline !important; vertical-align: bottom;" width="479"></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table border="0" cellpadding="0" cellspacing="0" class="mcnDividerBlock templateContainerf1-botshadow" style="min-width:100%;" width="100%">
<tbody class="mcnDividerBlockOuter">
<tr>
<td class="mcnDividerBlockInner" style="min-width: 100%; padding: 9px 18px;">
<table border="0" cellpadding="0" cellspacing="0" class="mcnDividerContent" style="min-width:100%;" width="100%">
<tbody>
<tr>
<td><span></span></td>
</tr>
</tbody>
</table><!--
<td class="mcnDividerBlockInner" style="padding: 18px;">
<hr class="mcnDividerContent" style="border-bottom-color:none; border-left-color:none; border-right-color:none; border-bottom-width:0; border-left-width:0; border-right-width:0; margin-top:0; margin-right:0; margin-bottom:0; margin-left:0;" />
-->
</td>
</tr>
</tbody>
</table>
<table border="0" cellpadding="0" cellspacing="0" class="mcnDividerBlock templateContainerf1" style="min-width:100%;" width="100%">
<tbody class="mcnDividerBlockOuter">
<tr>
<td class="mcnDividerBlockInner" style="min-width: 100%; padding: 9px 18px;">
<table border="0" cellpadding="0" cellspacing="0" class="mcnDividerContent" style="min-width:100%;" width="100%">
<tbody>
<tr>
<td><span></span></td>
</tr>
</tbody>
</table><!--
<td class="mcnDividerBlockInner" style="padding: 18px;">
<hr class="mcnDividerContent" style="border-bottom-color:none; border-left-color:none; border-right-color:none; border-bottom-width:0; border-left-width:0; border-right-width:0; margin-top:0; margin-right:0; margin-bottom:0; margin-left:0;" />
-->
</td>
</tr>
</tbody>
</table>
<table border="0" cellpadding="0" cellspacing="0" class="mcnImageBlock" style="min-width:100%;" width="100%">
<tbody class="mcnImageBlockOuter">
<tr>
<td class="mcnImageBlockInner" style="padding:9px" valign="top">
<table align="left" border="0" cellpadding="0" cellspacing="0" class="mcnImageContentContainer" style="min-width:100%;" width="100%">
<tbody>
<tr>
<td class="mcnImageContent" style="padding-right: 9px; padding-left: 9px; padding-top: 0; padding-bottom: 0; text-align:center;" valign="top"><img align="center" alt="" class="mcnImage" src="https://gallery.mailchimp.com/953c1f15f29edc16163af3d3e/images/0d3b67a9-6e0b-4227-8443-b3a820aee32f.png" style="max-width:250px; padding-bottom: 0; display: inline !important; vertical-align: bottom;" width="250"></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table><!--[if gte mso 9]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<tr>
<td align="center" id="templateColumns" valign="top">
<table border="0" cellpadding="0" cellspacing="0" class="templateContainer" width="100%">
<tr>
<td valign="top">
<!--[if gte mso 9]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600" style="width:600px;">
<tr>
<td align="center" valign="top" width="300" style="width:300px;">
<![endif]-->
<table align="left" border="0" cellpadding="0" cellspacing="0" class="columnWrapper" width="300">
<tr>
<td class="columnContainer" valign="top"></td>
</tr>
</table><!--[if gte mso 9]>
</td>
<td align="center" valign="top" width="300" style="width:300px;">
<![endif]-->
<table align="left" border="0" cellpadding="0" cellspacing="0" class="columnWrapper" width="300">
<tr>
<td class="columnContainer" valign="top"></td>
</tr>
</table><!--[if gte mso 9]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" id="templateFooter" valign="top">
<!--[if gte mso 9]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600" style="width:600px;">
<tr>
<td align="center" valign="top" width="600" style="width:600px;">
<![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" class="templateContainer" width="100%">
<tr>
<td class="footerContainer" valign="top"></td>
</tr>
</table><!--[if gte mso 9]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table><!-- // END TEMPLATE -->
</center>
</body>
</html>
No css due to character limit.
Specifically, the main header is separate from the imagery and footer of the email, pushed too far left for some reason. However, it works perfectly on all other email clients (See SendinBlue campaign builder preview).
Here is the full code I'm using for the address bar at the top:
<table class="ecxw320" align="center" border="0"
cellpadding="0" cellspacing="0" width="640">
<tbody>
<tr bgcolor="#000000">
<td height="50">
<table align="center" border="0" cellpadding="0"
cellspacing="0">
<tbody>
<tr>
<td>
<table align="center" border="0"
cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="font-family:'Helvetica',
monospace;font-size:12px;line-height:15px;color:#FFFFFF;text-align:center;text-decoration:none;white-space:nowrap;"><a
moz-do-not-send="true"
href="http://partofthekult.com/"
target="_blank"
style="font-family:'Helvetica',
monospace;font-size:12px;line-height:15px;color:#FFFFFF;text-align:center;text-decoration:none;white-space:nowrap;">
</a></td>
</tr>
</tbody>
</table>
</td>
<td style="font-family:'Helvetica',
monospace;font-size:12px;line-height:15px;color:#FFFFFF;text-align:center;text-decoration:none;white-space:nowrap;padding:10px;"><a
moz-do-not-send="true"
href="https://partofthekult.com/collections/tees"
target="_blank"
style="font-family:'Helvetica',
monospace;font-size:15px;line-height:15px;color:#FFFFFF;text-align:center;text-decoration:none;white-space:nowrap;">TEES
</a></td>
<td width="0">
<table align="center" border="0"
cellpadding="0" cellspacing="0"
width="2">
<tbody>
<tr>
</tr>
</tbody>
</table>
</td>
<td style="font-family:'Helvetica',
monospace;font-size:12px;line-height:15px;color:#FFFFFF;text-align:center;text-decoration:none;white-space:nowrap;padding:10px;"><a
moz-do-not-send="true"
href="https://partofthekult.com/collections/tanks"
target="_blank"
style="font-family:'Helvetica',
monospace;font-size:15px;line-height:15px;color:#FFFFFF;text-align:center;text-decoration:none;white-space:nowrap;">TANKS</a></td>
<td class="ecxh" width="0">
<table align="center" border="0"
cellpadding="0" cellspacing="0"
width="2">
<tbody>
<tr>
</tr>
</tbody>
</table>
</td>
<td class="ecxh" style="font-family:'Helvetica',
monospace;font-size:12px;line-height:15px;color:#FFFFFF;text-align:center;text-decoration:none;white-space:nowrap;padding:10px;"><a
moz-do-not-send="true"
href="https://partofthekult.com/collections/accessories"
target="_blank"
style="font-family:'Helvetica',
monospace;font-size:15px;line-height:15px;color:#FFFFFF;text-align:center;text-decoration:none;white-space:nowrap;">ACCESSORIES
</a></td>
<td class="ecxh" width="0">
<table align="center" border="0"
cellpadding="0" cellspacing="0"
width="2">
<tbody>
<tr>
</tr>
</tbody>
</table>
</td>
<td class="ecxh" style="font-family:'Helvetica',
monospace;font-size:12px;line-height:15px;color:#FFFFFF;text-align:center;text-decoration:none;white-space:nowrap;padding:10px;"><a
moz-do-not-send="true"
href="https://partofthekult.com/collections/sale"
target="_blank"
style="font-family:'Helvetica',
monospace;font-size:15px;line-height:15px;color:#FFFFFF;text-align:center;text-decoration:none;white-space:nowrap;">SALE</a></td>
<td class="ecxh" width="0">
<table align="center" border="0"
cellpadding="0" cellspacing="0"
width="2">
<tbody>
<tr>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
Images of how it renders on my iPhone 6s:
First Image
Second Image
I have designed a email template but I am facing alignment issue on iPhone 5 and yahoomail .The contents could not be aligned to center. I am using reply manager to send email template.
Heres my code :
<table align="center" border="0" cellpadding="0" cellspacing="0" style="width:600px">
<tbody>
<tr>
<td>
<table align="left" border="1" style="width:32%">
<tbody>
<tr>
<td>
<table align="center" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td><p><img alt="" src="http://websamplenow.com/30/logoloftems/images/brochure.jpg" style="height:157px; width:170px" /></p></td>
</tr>
<tr>
<td><p style="text-align:center"><span style="font-size:14px">Handing out brochures is a very cost-effective way to advertise your brand.</span></p></td>
</tr>
<tr>
<td>
<table align="center">
<tbody>
<tr>
<td><img src="http://websamplenow.com/129/ems1/images/readmore.jpg" /> </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!-- End Image 1 -->
<table align="left" style="width:2%">
<tbody>
<tr>
<td> </td>
</tr>
</tbody>
</table>
<table align="left" border="1" style="width:32%">
<tbody>
<tr>
<td>
<table align="center" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td><p><img alt="" src="http://websamplenow.com/30/logoloftems/images/imggz2.jpg" style="height:157px; width:170px" /></p></td>
</tr>
<tr>
<td><p style="text-align:center"><span style="font-size:14px">Wow clients by using an animated logo for your website or email.</span></p></td>
</tr>
<tr>
<td>
<table align="center">
<tbody>
<tr>
<td style="text-align:center"><img src="http://websamplenow.com/129/ems1/images/readmore.jpg" /> </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<!-- End Image 2 -->
</tbody>
</table>
<table align="left" style="width:2%">
<tbody>
<tr>
<td> </td>
</tr>
</tbody>
</table>
<table align="left" border="1" style="width:32%">
<tbody>
<tr>
<td>
<table align="center" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td><p><img alt="" src="http://websamplenow.com/30/logoloftems/images/invite.jpg" style="height:157px; width:170px" /></p></td>
</tr>
<tr>
<td><p style="text-align:center"><span style="font-size:14px">Promoting events means attracting people. You need attractive designs!</span></p></td>
</tr>
<tr>
<td>
<table align="center">
<tbody>
<tr>
<td><img src="http://websamplenow.com/129/ems1/images/readmore.jpg" /> </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<!-- End Image 3 -->
</tbody>
</table>
<!-- 3Column ends --><!--1 img starts--></td>
</tr>
<tr>
<td>
<table align="center" cellpadding="10" cellspacing="10" style="width:600px">
<tbody>
<tr>
<td style="text-align:center"><img src="http://websamplenow.com/129/ems1/images/moreinfo.jpg" style="width:60%" /></td>
</tr>
</tbody>
</table>
<!--1 img ends--><!--clients logo starts--><!--1 img ends--><!--clients logo starts--></td>
</tr>
<tr>
<td>
<table align="center" cellpadding="0" cellspacing="0" style="width:600px">
<tbody>
<tr>
<td><img src="http://websamplenow.com/129/ems1/images/fc_all.jpg" style="width:600px" /></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<table align="center" cellpadding="0" cellspacing="0" style="width:600px">
<tbody>
<tr>
</tr>
</tbody>
</table>
<table align="center" cellpadding="0" cellspacing="0" style="width:600px">
<tbody>
<tr>
<td><img src="http://websamplenow.com/129/ems1/images/fc_microsoft.jpg" /></td>
<td><img src="http://websamplenow.com/129/ems1/images/fc_gilette.jpg" /></td>
<td><img src="http://websamplenow.com/129/ems1/images/fc_oreck.jpg" /></td>
<td><img src="http://websamplenow.com/129/ems1/images/fc_whirlpool.jpg" /></td>
<td><img src="http://websamplenow.com/129/ems1/images/fc_bluething.jpg" style="height:37px; width:98px" /></td>
<td dir="rtl"><img src="http://websamplenow.com/129/ems1/images/fc_oprah.jpg" style="height:37px; width:126px" /></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
</tr>
</tbody>
</table>
The button 3 boxes are not aligned to center.
Can anyone help me to solve it out?
I have a table alignment I’m having trouble doing what I want it to do. Below is what I have, but I want the cell with 1 in it to hug the top the whole table while I want the cell with 2 in it to hug the bottom baseline of the table. Cell 3 may have variable height. Anyone know how this possible? Probably something simple I’m missing but having figured it out yet.
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td valign="top">
<table cellpadding="0" cellspacing="0" border="0" width="50">
<tr>
<td>1
</td>
</tr>
<tr>
<td>2
</td>
</tr>
</table>
</td>
<td height="200" width="50">3
</td>
</tr>
</table>
You need to add a height="100%" on your tables, along with some valign attributes on the cells.
<table cellpadding="0" cellspacing="0" border="0" height="100%">
<tr>
<td>
<table cellpadding="0" cellspacing="0" border="0" width="50" height="100%">
<tr>
<td valign="top">1
</td>
</tr>
<tr>
<td valign="bottom">2
</td>
</tr>
</table>
</td>
<td>
<table><tr><td height="200" width="50">3</td></tr></table>
</td>
</tr>
</table>
Ah figured it out:
<table width="600" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="300" height="19">1</td>
<td width="300" rowspan="2">
<br>
<br>
3<br>
<br>
</td>
</tr>
<tr>
<td valign="bottom">
<table width="300" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>2</td>
</tr>
</table></td>
</tr>
</table>