I am making a email template and inserting an python list with a forloop, the problem I am having is that now since I already designed the template with a I cant get right array to align perfectly with the left array and the right array is pushed down.
Showing the error image
The right array is pushed down.
I need to get the array fixed but not sure how to do it since if I change the template design it starts effecting the email.
<tr>
<td bgcolor="#FFFFFF" align="center" valign="top" style=
"padding: 10px;">
<table role="presentation" cellspacing="0" cellpadding=
"0" border="0" width="100%">
<tr>
<!-- Column : BEGIN -->
<td width="50%" class="stack-column-center" align=
"center">
<table role="presentation section" class=
"presentation-section" cellspacing="0"
cellpadding="0" border="0">
<tr>
<th style="text-align: center">
<h3 style=
" font-size:14px; font-weight:800; margin:0 0 10px; font-family:Helvetica;">
Tele companies
</h3>
</th>
</tr>
{% for comp, values in vis_domain.companies %}
<tr>
<td style="text-align: center">
<p style=
"margin:5px 0; font-size:14px; font-family:Helvetica;">
<span style="font-size:13px ;color:gray; ">{{ values.0 }}</span> {{ comp }}
</p>
</td>
</tr>
{% endfor %}
</table>
</td><!-- Column : END -->
<!-- Column : BEGIN -->
<td width="50%" class="stack-column-center" align=
"center">
<table role="presentation" class=
"presentation-section" cellspacing="0"
cellpadding="0" border="0">
<tr>
<th style="text-align: center">
<h3 style=
" font-size:14px; font-weight:800; margin:0 0 10px; font-family:Helvetica;">
Tags used in chats
</h3>
</th>
</tr>
{% for tags in vis_domain.tags %}
<tr>
<td style="text-align: center">
<p style="margin:5px 0; font-size:14px;font-family:Helvetica;">
<span style="font-size:13px ;color:gray;">{{ tags.tag_count }}</span> {{ tags.name }}
</p>
</td>
</tr>
{% endfor %}
</table>
</td><!-- Column : END -->
</tr>
</table>
</td>
</tr><!-- 2 Even Columns : END -->
You need to add a style to the td's and specify the vertical alignment.
Try editing the first td after the 2 <!-- Column : BEGIN --> comments like this:
<td width="50%" class="stack-column-center" align="center" style="vertical-align: top;">
Related
Not sure why this is happening. The footer text completely disappears in Outlook/Windows email testing. All other email clients work and, the footer appears, as it should.
Here is the template with the footer code. Did I miss closing a table or? Any suggestions? So odd-thanks for looking.
```
`<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="center" class="darkmode-footer" bgcolor="#122147" style="padding: 50px 15px;">
<table role="presentation" class="w100p" cellpadding="0" cellspacing="0" border="0" style="width: 600px; max-width: 600px;">
<tr>
<td align="center"><a href="" target="_blank"><!--[if !mso]><! -->
<div style="text-align: center;">
<br>
<span style="font-size:10px;"><span style="color:#ffffff;">You are receiving this email because you are a valued friend of the .<br>
Please note that your personal information is kept private and is never shared with other organizations.<br>
<br>
Want to change how you receive these emails?<br>
You can </span></span><span style="color:#ffffff; font-size:10px; text-decoration: underline;">change your subscription preferences here</span><span style="color:#ffffff; font-size:10px;">.<br>
View this email in a browser.<br>
<span style="color: #122147;">%%[ if 0 == 1 then ]%% %%Member_Busname%% %%Member_Addr%% %%Member_City%%, %%Member_State%% %%Member_PostalCode%% %%Member_Country%% %%[ endif ]%%</span></span></div> </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
If you put the code which you posted into a snippet here (as I did) and in the editor click "Tidy" to properly format it, you will notice a non-fitting </td>in the 9th-to-last line, and also these superfluous closing tags in the last three lines:
</td>
</tr>
</table>
The snippet's browser emulator obviously is tolerant in fixing these errors, but I can imagine that especially mail applications like Outlook won't be that tolerant and treat this in another way.
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="center" class="darkmode-footer" bgcolor="#122147" style="padding: 50px 15px;">
<table role="presentation" class="w100p" cellpadding="0" cellspacing="0" border="0" style="width: 600px; max-width: 600px;">
<tr>
<td align="center"><a href="" target="_blank"><!--[if !mso]><! -->
<div style="text-align: center;">
<br>
<span style="font-size:10px;"><span style="color:#ffffff;">You are receiving this email because you are a valued friend of the .<br>
Please note that your personal information is kept private and is never shared with other organizations.<br>
<br>
Want to change how you receive these emails?<br>
You can </span></span><span style="color:#ffffff; font-size:10px; text-decoration: underline;">change your subscription preferences here</span><span style="color:#ffffff; font-size:10px;">.<br>
View this email in a browser.<br>
<span style="color: #122147;">%%[ if 0 == 1 then ]%% %%Member_Busname%% %%Member_Addr%% %%Member_City%%, %%Member_State%% %%Member_PostalCode%% %%Member_Country%% %%[ endif ]%%</span></span>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
You have a stray <!--[if !mso]><! -->, without a closing if (endif).
Remove that, and the text will show.
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>
I have seen many posts, but couldn't find the right solution. If you have used flying saucer 9 in POM.xml this is the issue with PDF. Can we solve it with css?
Tried a lot but its not working in HTML its good.
<div style="overflow-x:auto; width:90%; margin: 0 auto" id="Group16882">
<div class="caption">
<br>Instructions
</div>
<table border="1" width="100%" align="center" cellpadding="2" cellspacing="1" summary="Instruction" class="generaltable" style="position:static">
<tr>
<td valign="top" colspan="1" rowspan="2" class="edit">
<span style="font-size: 20; color:blue; " id=C ol197626>
<b>
The 50 States, District of Columbia, and the
Commonwealth of Puerto Rico and other
territories a Modernizas report is not
considered to be confidential.
<br>
</b>
</span>
</td>
</tr>
</table>
</div>
<div style="overflow-x:auto; width:90%; margin: 0 auto" id="Group16883">
<div class="caption"></div>
<table border="1" width="100%" align="center" cellpadding="2" cellspacing="1" summary="Estimated Figures" class="generaltable" style="position:static">
<tr>
<td valign="top" colspan="2" rowspan="1" class="edit">
<span id=C ol197627><b>
</a> Click
<a ref="http://www.acf.hhs.gov/programs/ocs/resource/funding-
applications" target="_blank">HERE</a>
to read the expandctions.
<br><br>
<A>
</b>
</td>
</tr>
<tr>
<td valign="top" colspan = "1" rowspan = "1" width = "74%" class="edit">
<span id = Col197628>
<b>
</A>
Do the data below figures?<br>
If YEpf assistance that has
at least one estimated data entry.
<A>
</b>
</td>
<td valign="top" colspan = "1" rowspan = "1" width = "26%" class="edit">
<span id = Col197629><b></A>Select One<A><br></b>
<img src="file:/C:/apache-tomcat-8.5.24/webapps/oldcwb/WEB-INF/classes/acf/oldc/ws/images/radiounchecked.gif" alt="No">
Yes
<img src="file:/C:/apache-tomcat-8.5.24/webapps/oldcwb/WEB-INF/classes/acf/oldc/ws/images/radiounchecked.gif" alt="No">
No
</span>
</td>
</tr>
</table>
</div>
the html could do with some fixing do that first,
<div style="overflow-x:auto; width:90%; margin: 0 auto" id="Group16882">
<div class="caption">
<br>Instructions <!-- br should be self closing-->
</div>
<table border="1" width="100%" align="center" cellpadding="2" cellspacing="1"
summary="Instruction" class="generaltable" style="position:static">
<tr>
<td valign="top" colspan="1" rowspan="2" class="edit">
<span style="font-size: 20; color:blue; " id=C ol197626> <!-- id is not in quotes-->
<b>
The 50 States, District of Columbia, and the
Commonwealth of Puerto Rico and other
territories a Modernizas report is not
considered to be confidential.
<br> <!-- should be self closing-->
</b>
</span>
</td>
</tr>
</table>
</div>
<div style="overflow-x:auto; width:90%; margin: 0 auto" id="Group16883">
<div class="caption"></div>
<table border="1" width="100%" align="center" cellpadding="2" cellspacing="1"
summary="Estimated Figures" class="generaltable" style="position:static">
<tr>
<td valign="top" colspan="2" rowspan="1" class="edit">
<span id=C ol197627> <!-- id is not in quotes where is the close of span-->
<b>
</a> Click <!-- this is a end and should be a start also you have double wrapoped the a which should not be done. (anchor anchor double anchor does not make much sense)-->
<a ref="http://www.acf.hhs.gov/programs/ocs/resource/funding-
applications" target="_blank">HERE</a>
to read the expandctions.
<br><br>
<A> <!-- should be lower case and should be an end, see above-->
</b>
</td>
</tr>
<tr>
<td valign="top" colspan = "1" rowspan = "1" width = "74%" class="edit">
<span id = Col197628> <!-- id is not in quotes where is the close of span-->
<b>
</A> <!-- should be lower case, a start not an end-->
Do the data below figures?<br>
If YEpf assistance that has
at least one estimated data entry.
<A> <!-- should be lower case should be a end and not a start-->
</b>
</td>
<td valign="top" colspan = "1" rowspan = "1" width = "26%" class="edit">
<span id = Col197629> <!-- id is not in quotes-->
<b>
</A>Select One<A> <!-- tag start and end switched-->
<br>
</b>
<img src="file:/C:/apache-tomcat-8.5.24/webapps/oldcwb/WEB-INF/classes/acf/oldc/ws/images/radiounchecked.gif" alt="No">
Yes
<img src="file:/C:/apache-tomcat-8.5.24/webapps/oldcwb/WEB-INF/classes/acf/oldc/ws/images/radiounchecked.gif" alt="No">
No
</span>
</td>
</tr>
</table>
</div>
I have no idea what's going on. The sections show up in preview and test emails, but when I add template to a campaign, suddenly the Contact and Facebook section is gone. WHYYY. It makes no sense why it's just disappearing when I add it to a campaign. This is the section that disappears when I add email template to the campaign. Is something wrong with the tables? I looked at CSS and there's hardly anything.
<!-- Facebook Recommendation -->
<div mc:repeatable="Select" mc:variant="facebook recommendation">
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#231C15">
<tr>
<td valign="top" align="center" class="p30-15" style="padding:60px 0px 60px 0px;">
<table width="650" border="0" cellspacing="0" cellpadding="0" class="mobile-shell">
<tr>
<td class="td" style="width:100%;font-size:0pt;line-height:0pt;padding:0;margin:0;font-weight:normal;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<th class="column" style="font-size:0pt;line-height:0pt;padding:0;margin:0;font-weight:normal;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="h3 pb20" style="color:#fff;font-family:Roboto, Arial, sans-serif;font-size:40px;line-height:40px;text-align:center;font-weight:bold;padding-bottom:20px;">
<div mc:edit="text_16">Recommend us on Facebook!</div>
</td>
</tr>
<tr>
<td class="text pb20" style="color:#fff;font-family:Roboto, Arial, sans-serif;font-size:15px;line-height:30px;text-align:center;padding-bottom:20px;">
<div mc:edit="text_18">Recommend us on our Facebook page! This ensures we can reach even more people to provide the best possible care during their move! </div>
</td>
</tr>
<!-- Button -->
<tr mc:hideable>
<td align="center">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="text-button" style="background:#fff;color:#231C15;font-family:Lato, Arial, sans-serif;font-size:14px;line-height:18px;padding:12px 20px;text-align:center;letter-spacing:1px;font-weight:600;text-transform:uppercase;border-radius:22px;">
<div mc:edit="text_19">
<span class="link-white" style="color:#231C15; text-decoration:none;">RECOMMEND US</span>
</div>
</td>
</tr>
</table>
</td>
</tr>
<!-- END Button -->
</table>
</th>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!-- Facebook Recommendation -->
<!-- Contact -->
<div mc:repeatable="Select" mc:variant="Contact">
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#f4f4f4">
<tr>
<td valign="top" align="center" class="p30-15" style="padding:30px 0px 0px 0px;">
<table width="650" border="0" cellspacing="0" cellpadding="0" class="mobile-shell">
<tr>
<td class="td" style="width:100%;font-size:0pt;line-height:0pt;padding:0;margin:0;font-weight:normal;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="h3 center pb15" style="color:#000000;font-family:Roboto, Arial, sans-serif;font-size:24px;line-height:32px;font-weight:bold;text-align:center;padding-bottom:10px;">
<div mc:edit="text_37">Contact Us</div>
</td>
</tr>
<tr>
<td class="text-center pb30" style="color:#777777;font-family:Roboto, Arial, sans-serif;font-size:15px;line-height:30px;text-align:center;padding-bottom:20px;">
<div mc:edit="text_38">Looking to make another move? <br>Give us a call!</div>
</td>
</tr>
<tr>
<td align="center" style="padding-bottom:50px;">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<th class="column-top" style="font-size:0pt;line-height:0pt;padding:0;margin:0;font-weight:normal;vertical-align:top;">
<table class="center" border="0" cellspacing="0" cellpadding="0" style="text-align:center;">
<tr>
<td class="img" width="50" style="font-size:0pt;line-height:0pt;text-align:left;"><img src="https://gallery.mailchimp.com/0d9e3bf61406dcc2f6b321e6d/images/1a994bda-97c5-4ebf-b478-de1e3e2e6d6c.png" width="34" height="34" style="max-width:34px;" border="0" alt="" mc:edit="image_20">
</td>
<td class="text" style="color:#777777;font-family:Roboto, Arial, sans-serif;font-size:16px;line-height:30px;text-align:left;">
<div mc:edit="text_39">
<strong class="link" style="color:#777777;text-decoration:none;">855-624-4537</strong>
</div>
</td>
</tr>
</table>
</th>
<th class="column-empty2" width="30" style="font-size:0pt;line-height:0pt;padding:0;margin:0;font-weight:normal;vertical-align:top;"></th>
<th class="column-top" style="font-size:0pt;line-height:0pt;padding:0;margin:0;font-weight:normal;vertical-align:top;">
<table class="center" border="0" cellspacing="0" cellpadding="0" style="text-align:center;">
<tr>
<td class="img" width="50" style="font-size:0pt;line-height:0pt;text-align:left;"><img src="https://gallery.mailchimp.com/0d9e3bf61406dcc2f6b321e6d/images/9e146158-5e5d-4d4d-a99e-02f32506799a.png" width="34" height="34" style="max-width:34px;" border="0" alt="" mc:edit="image_21">
</td>
<td class="text" style="color:#777777;font-family:Roboto, Arial, sans-serif;font-size:16px;line-height:30px;text-align:left;">
<div mc:edit="text_40">
<a target="mailto:service#moveandstore.com" class="link" style="color:#777777;text-decoration:none;"><strong class="link" style="color:#777777;text-decoration:none;">service#moveandstore.com</strong></a>
</div>
</td>
</tr>
</table>
</th>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0" dir="rtl" style="direction:rtl;">
<tr>
<th class="column" dir="ltr" width="433" style="font-size:0pt;line-height:0pt;padding:0;margin:0;font-weight:normal;">
</th>
<th class="column-empty" dir="ltr" width="40" style="font-size:0pt;line-height:0pt;padding:0;margin:0;font-weight:normal;vertical-align:top;"></th>
<th class="column" dir="ltr" style="font-size:0pt;line-height:0pt;padding:0;margin:0;font-weight:normal;">
</th>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!-- END Contact -->
Okay - From my limited knowledge with MailChimp I think I have stumbled across something.
I see in your table you have the mc:repeatable="Select" attribute. From the MailChimp help section - this says that this will be hidden automatically unless a user adds it via the campaign builder.
Add the mc:repeatable attribute to any area that includes an mc:edit attribute to create a content block that can be repeatedly added to a template. Repeatable content areas are hidden by default so they only appear in a template if you add them within the Campaign Builder.
Source: Mailchimp help (create editable content areas with mailchimps template language)
I am trying to create a responsive HTML email. The two columns should be equal height and they currently stack on mobile. Everything works properly until there is a lot of text as the Billing Information or Shipping Information. It's an unlikely case that the text will ever look like this, but I must handle all possibilities without the email breaking. How can I make my td stretch vertically instead of horizontally? I cannot use a fixed width as it will break the responsiveness of my table.
<table align="left" border="0" cellpadding="0" cellspacing="0" class="mcnTextBlock" width="100%">
<tbody class="mcnTextBlockOuter">
<tr>
<td valign="top" width="100%" class="mcnTextBlockInner" style="padding-top:9px; padding-right:18px; padding-left: 18px; padding-bottom: 15px;">
<!--[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" bgcolor="white" border="0" cellpadding="5" cellspacing="0" style="max-width:100%; min-width:100%;" width="100%" class="mcnTextContentContainer">
<tbody>
<tr>
<td valign="top" width="50%" class=" templateColumnContainer"">
<!--<td valign="top" width="300" class="mcnTextBlockInner" style="padding-top:9px;padding-right:18px;padding-left:18px;padding-bottom:15px;"> -->
<table border="0" cellpadding="5" cellspacing="0" width="100%" style="max-width:100%; min-width:100%;" class="mcnTextContentContainer">
<tr>
<td valign="top" align="center" class="leftColumnContent" style="text-align: center;" >
<span style="color:#000000; font-size:18px; display: block; width:100%; height:auto;"><strong>Billing Information</strong></span>
</td>
</tr>
<tr>
<td valign="middle" class="leftColumnContent" style="text-align: center;">
<span style="font-size:14px; color: #000000!important;">{{ receipt.order.get_billing_html|safe }}</span>
</td>
</tr>
</table>
</td>
<td valign="top" width="50%" class="templateColumnContainer">
<table border="0" cellpadding="5" cellspacing="0" width="100%">
<tr>
<td class="rightColumnContent" style="text-align: center;">
<span style="font-size:18px; color:#000000; text-align:center; display: block; width:100%; height:auto;"><strong>Shipping Information</strong></span>
</td>
</tr>
<tr>
<td valign="middle" class="rightColumnContent" style="text-align: center;">
<span>
Shipping Address
</span>
<br><span style="font-size:14px; color: #000000!important;">Shipping speed description
{% endif %}
{% if receipt.order.shipper_tracking_number %}
<br><strong style="color: #000000;!important">Tracking: </strong>Shipper Name</span><br>
<a href="shipping tracking number" target="_blank" style="color: #000000; font-size: 14px;">
</a>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
Found the answer in post: HTML CSS How to stop a table cell from expanding
Using style="overflow-wrap: break-word;" on the <td> solved my problem. It is compatible across Gmail, Apple Mail, Yahoo, latest Outlook.