HTML table not rendering as expected - html

I am trying to create a HTML email, and therefore using a lot of nested tables. However, My second <tr> is not inline with the first row, and I'm not quite sure why. Here is how it's coming out at the moment:
I want the second row to be centred rather than touching the edges.
Here's what I have:
<!-- BACKGROUND -->
<table cellpadding="0" cellspacing="0" border="0" width="100%" bgcolor="#000000">
<tbody>
<tr>
<td>
<!-- SECTION 1 -->
<!--START OF EMAIL BODY -->
<table cellpadding="0" cellspacing="0" border="0" width="600" align="center">
<tbody>
<tr>
<td>
<table cellpadding="0" cellspacing="0" border="0" width="600" bgcolor="#ffffff">
<tbody>
<tr>
<td height="30"><!-- PADDING --></td>
<tr>
<td style="font-family:Arial;font-size:12px;line-height:15px;color:#353535;text-align:center;">
Not rendering correctly? View this email as a web page here.
</td>
</tr>
<tr>
<td height="15"><!-- PADDING --></td>
</tr>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!--END OF EMAIL BODY -->
<!-- SECTION 1 END -->
</td>
</tr>
<tr>
<td>
<!-- SECTION 2 -->
<!-- LOGO AND SOCIAL MEDIA -->
<table cellpadding="0" cellspacing="0" border="0" width="600" bgcolor="#FFFFFF">
<tbody>
<tr>
<td><!-- <td height="60">-->
<table cellpadding="0" cellspacing="0" border="0">
<tbody>
<tr>
<td width="425"><!-- PADDING --></td>
<td style="font-family:Arial;font-size:10px;line-height:15px;color:#353535;text-align:center;font-weight:bold;">SHARE
</td>
<td width="10"><!-- PADDING (SPACE BETWEEN SHARE AND LINKS) --></td>
<!-- LINKEDIN-->
<td>
</td>
<!-- TWITTER -->
<td>
</td>
<!-- YOUTUBE -->
<td>
</td>
</tr>
</tbody>
</table>
<!-- SECTION 2 END -->
</td>
</tr>
</tbody>
</table>

There's nothing wrong with the alignment of the row.
What are misaligned are the two tables inside the rows.
Compare:
<!--START OF EMAIL BODY -->
<table cellpadding="0" cellspacing="0" border="0" width="600" align="center">
<!-- LOGO AND SOCIAL MEDIA -->
<table cellpadding="0" cellspacing="0" border="0" width="600" bgcolor="#FFFFFF">
One of them is centred. The other is left aligned.

Related

Mustache - Postmark email conditional formatting

I am trying to conditionally render a block of HTML, dependent on the presence of a key in the JSON -> custom_invite_text.
My understanding is that the Mustachio conditions control the presence of the HTML blocks below. This is working fine, but we lose access to the dynamic data provided by the JSON. Presume it is a scoping issue, but some guidance would be good?
The following HTML is used to generate an email:
<p>{{body}}</p>
{{#custom_invite_text}}
<table class="custom_invite">
<tr class="custom_invite_rows">
<td class="custom_invite_row1"><div class="roundel"><p class="roundel-text">{{custom_invite_org}}</p></div></td>
<td class="custom_invite_row2"><p class="custom_invite_heading">From {{org_name}}</p></td>
</tr>
</table>
{{/custom_invite_text}}
{{#custom_invite_text}}
<table class="body-action custom_invite_div" align="center" width="100%" cellpadding="0" cellspacing="0">
<tr>
<td class="custom_invite_text" align="left">
{{{custom_invite_text}}}
</td>
</tr>
<tr class="custom_invite_btn">
<td align="center">
<!-- Border based button https://litmus.com/blog/a-guide-to-bulletproof-buttons-in-email-design -->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
{{behaviour_url_description}}
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
{{/custom_invite_text}}
{{^custom_invite_text}}
<table class="body-action" align="center" width="100%" cellpadding="0" cellspacing="0">
<tr class="custom_invite_btn">
<td align="center">
<!-- Border based button https://litmus.com/blog/a-guide-to-bulletproof-buttons-in-email-design -->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
{{behaviour_url_description}}
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
{{/custom_invite_text}}
Thanks.

How do I prevent text from different table from appearing on a picture html email code

So I place a picture in first table to position absolute to have text appear above it but the problem I'm having now is the table below text is also appearing on the image. How Do I prevent this from happening ?
<tr>
<td>
<table width="100%" cellspacing="0" cellpadding="0" border="0" style="">
<tr>
<td>
<img src="img/suit1.jpeg" width="590px;" height="500px;" style="position:absolute">
<h1>each</h1>
<button>SHOP Now</button>
</td>
</tr>
</table>
</td>
</tr>
<!-- end of row 3 -->
<!-- start of row 4-->
<tr>
<td>
<table width="100%" cellspacing="0" cellpadding="0" border="0" style="">
<tr>
<td>
<h1>hello</h1>
</td>
</tr>
</table>
</td>
</tr>
Please try applying position: absolute to text elements. In my solution, i've wrapped text inside a div and applied position: absolute property. Also, i've applied position: relative to the parent element of both image and text.
<tr>
<td>
<table width="100%" cellspacing="0" cellpadding="0" border="0" style="">
<tr>
<td style="position:relative;">
<img src="img/suit1.jpeg" width="590px;" height="500px;">
<div style="position:absolute; top: 0; left: 10px;">
<h1>each</h1>
<button>SHOP Now</button>
</div>
</td>
</tr>
</table>
</td>
</tr>
<!-- end of row 3 -->
<!-- start of row 4-->
<tr>
<td>
<table width="100%" cellspacing="0" cellpadding="0" border="0" style="">
<tr>
<td>
<h1>hello</h1>
</td>
</tr>
</table>
</td>
</tr>

MailChimp HTML email template extend partial background on table rows

I am coding a custom email template HTML/CSS and I need to replicate the attached image.
My question is about the blue background color element, which goes beyond two table rows, one would be the "Welcome to the family", and the other would contain the video.
How can I implement that?
<!-- BEGIN MODULE: BODY CONTENT // -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" align="center" valign="top">
<tr>
<td valign="top" style="background-color:#1D75B9; border:0;">
<h2 style="margin:40px 20px; text-transform:capitalize; text-align:center;">Welcome to the family!</h2>
</td>
</tr>
<tr>
<td valign="top">*|YOUTUBE:[$vid=fj77lSG6Bl8, $max_width=500, $ratings=N, $views=N, $border=N, $title=N, $trim_border=N]|*
</td>
</tr>
</table>
<!-- // END MODULE: BODY CONTENT -->
Any example that makes the same thing would be helpful to me.
thank you
You can do like this :
<body style="margin:0px; padding:0px;">
<div align="center">
<table border="0" cellpadding="0" cellspacing="0" width="100%" align="center" valign="top">
<tr>
<td valign="top">
<img src="WvLArjpg6991210.png">
</td>
</tr>
<tr>
<td valign="top">
<img src="second.png" width="461">
</td>
</tr>
</table>
</div>
</body>
You have cut images into pieces and use in <tr><td><img src></td></tr>

Responsive email breaks on smartphone email client apps

I'm editing a bought responsive email template. Below you can see the structure used.
The email is responsive on the web version and on desktop browser email clients. But when testing it on mobile email apps like Gmail, the structure breaks, and on Yahoo it displays the desktop version.
After cleaning up the code, and testing diferent versions... I think the problem is in the section where there is a background full width and then a normal width table with 2 images.
I tried putting the background on the top <table> and then on the <td> but it still don't work on mobile email apps like Gmail or Yahoo.
I don't know if I'm missing up something, or I'm doing something wrong. It only breaks on mobile email apps.
Thanks in advance.
Here is the code of the top section.
<table class="main-header" data-module="Header" data-bgcolor="Header" data-bg="Header" style="position: relative; opacity: 1; z-index: 0; background-image: url(https://i.ytimg.com/vi/vUQUDS-TL6Q/hqdefault.jpg); background-size: cover; background-position: 50% 40%;" background="https://i.ytimg.com/vi/vUQUDS-TL6Q/hqdefault.jpg" width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tbody><tr>
<td class="zay600" border="0" align="center" cellpadding="0" cellspacing="0">
<table cellspacing="0" cellpadding="0" align="center" border="0" width="90%" class="zay600">
<!-- img -->
<tbody><tr>
<td align="center">
<table align="center" class="zay600" width="600" border="0" cellspacing="0" cellpadding="0">
<!-- logo -->
<tbody><tr>
<td>
<table align="left" class="zay3-3" width="120" border="0" cellspacing="0" cellpadding="0">
<tbody><tr>
<td height="40">
</td>
</tr>
<!-- logo -->
<tr>
<td align="center" valign="middle" style="line-height:0px;">
<img style="display:block; font-size:0px; line-height:0px; border:0px;" src="http://www.dickson-constant.com/medias/images/catalogue/api/m654-grey-680.jpg" width="249" height="70" alt="img">
</td>
</tr>
<!-- end logo -->
</tbody></table>
<!--Space-->
<table width="1" height="30" border="0" cellpadding="0" cellspacing="0" align="left">
<tbody><tr>
<td height="30" style="font-size: 0;line-height: 0;border-collapse: collapse;">
<p style="padding-left: 24px;">
</p>
</td>
</tr>
</tbody></table>
<table align="right" class="zay3-3" width="280" border="0" cellspacing="0" cellpadding="0">
<tbody><tr>
<td height="50">
</td>
</tr>
<!-- logo -->
<tr>
<td align="center">
<table class="zay-inner" width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tbody><tr>
<td align="center" valign="middle" style="line-height:0px;"><img style="display:block; font-size:0px; line-height:0px; border:0px;" src="http://www.dickson-constant.com/medias/images/catalogue/api/m654-grey-680.jpg" width="280" height="36" alt="img">
</td></tr>
</tbody></table>
</td>
</tr>
<!-- end logo -->
</tbody></table>
<!--End Space-->
</td>
</tr>
<!-- menu -->
<!-- end menu -->
</tbody></table>
</td>
</tr>
<!-- end logo -->
<tr>
<td height="100" class="header-td">
</td>
</tr>
<!-- subtitle -->
<tr>
<td>
<!-- content -->
<table class="zay600" width="600" border="0" align="center" cellpadding="0" cellspacing="0">
<tbody><tr>
<td align="center">
<table border="0" width="184" align="center" cellpadding="0" cellspacing="0" class="container580">
<tbody><tr>
<td align="center" valign="middle" style="line-height:0px;">
</td>
</tr>
</tbody></table>
</td>
</tr>
<tr>
<td align="center">
<!-- img -->
<table align="center" class="zay3-3" width="275" border="0" cellspacing="0" cellpadding="0">
<tbody><tr>
<td align="center" style="line-height:0px;">
</td>
</tr>
</tbody></table>
<!-- end img -->
</td>
</tr>
<tr>
<td align="center">
<!-- img -->
<table align="center" class="zay3-3" width="275" border="0" cellspacing="0" cellpadding="0">
<tbody><tr>
<td align="center" style="line-height:0px;">
</td>
</tr>
</tbody></table>
<!-- end img -->
</td>
</tr>
</tbody></table>
<!-- end content -->
</td>
</tr>
<!-- end subtitle -->
<tr>
<td height="100" class="header-td">
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>

<tr> height displaying incorrectly

I've been beating my head against a really stupid problem for the last while. Why can't I get the cell separating the two boxes to properly display at 9px?? I've done the math a couple of times and it works out, and yet in the cell w/ the arrow pointing towards it, it's adding extra height:
I actually appears to be doubling the 9 px height set for it (18px approx). Why?? This makes no sense.
<!-- BIG WRAPPER TABLE FOR CENTRAL CONTENT -->
<table width="700px" border="0" cellspacing="0" cellpadding="0" class="homepage">
<tr align="center">
<td>
<table width="681" height="451" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td rowspan="3" bgcolor="#FF66CC">Image will go here</td>
<td rowspan="3" width="9"> </td>
<td height="221" width="221" bgcolor="#3f7583">Text will go here</td>
</tr>
<tr height="9">
<td height="9" width="221" bgcolor="#FFFFFF"> </td>
</tr>
<tr>
<td height="221" width="221" bgcolor="#CC0000">Image will go here</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- END BIG WRAPPER TABLE -->
this is because of your td
<td height="9" width="221" bgcolor="#FFFFFF"> </td>
It is taking the height of your when rendered with normal font size, just remove it and it should work.
Here is the working fiddle
Instead of creating TD's for your spacing, why not just use the CellSpacing to accomplish what you need to do:
<table width="700px" border="0" cellspacing="0" cellpadding="0" class="homepage" style="font-size: 7pt;">
<tr align="center">
<td>
<table width="681" height="451" border="0" cellspacing="9" cellpadding="0" align="center">
<tr>
<td rowspan="2" bgcolor="#FF66CC">Image will go here</td>
<td height="221" width="221" bgcolor="#3f7583">Text will go here</td>
</tr>
<tr>
<td height="221" width="221" bgcolor="#CC0000">Image will go here</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- END BIG WRAPPER TABLE -->