Attempting to make block elements touch each other in Mailchimp - block

Even though I set padding to "0" in Mailchimp design areas, my content blocks don't butt up and touch each other, there is a whitespace between the blocks. I dragged over and inserted a code block, but I don't know what to put in it to make these items touch. I added a picture of the code block input area. Can somebody please tell me what code to put in this area? Thanks so much in advance. I removed the > so that it would render on the page. Sorry for being such a newbie with this.
This is in the code box. div class="mcnTextContent" Use your own custom HTML /div

I found this Mailchimp workaround in a Facebook feed:
Use the Code block to build your sections and remove padding and spacing.
Drag a Code block into your layout. Delete the code that is already in there. Copy and paste the code shown below into the block, save and close.
<table style="max-width:100%; min-width:100%;background-color:#FF0000;" class="mcnTextContentContainer" width="100%" cellspacing="0" cellpadding="0" border="0" align="left">
<tbody>
<tr>
<td class="mcnTextContent" style="padding: 10px 18px 9px; line-height: 200%;" valign="top">
<p class="null" style="font-family: helvetica; font-weight:700; font-size: 35px;text-align:center;color:white">September 2018 Newsletter</p>
</td>
</tr>
</tbody>
</table>
Drag another Code block into your layout, below the block you just created. Delete the code that is already in there. Copy and paste the code shown below into the block, save and close.
<table class="mcnTextBlock" style="min-width:100%;" width="100%" cellspacing="0" cellpadding="0" border="0">
<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 style="max-width:100%; min-width:100%; background-color:#c0c0c0" class="mcnTextContentContainer" width="100%" cellspacing="0" cellpadding="0" border="0" align="left">
<tbody><tr>
<td class="mcnTextContent" style="padding-top:0; padding-right:18px; padding-bottom:9px; padding-left:18px;" valign="top">
<h1 style="text-align:center">It's time to design your email.</h1>
<p>Now that you've selected a template, you'll define the layout of your email and give your content a place to live by adding, rearranging, and deleting content blocks.</p>
<p>By using image with caption blocks in multi-column templates, you can create a product grid that works perfectly for e-commerce.</p>
<p>If you need a bit of inspiration, you can <a class="mc-template-link" href="http://inspiration.mailchimp.com">see what other MailChimp users are doing</a>, or <a class="mc-template-link" href="http://mailchimp.com/resources/email-design-guide/">learn about email design</a> and blaze your own trail.</p>
</td>
</tr>
</tbody></table>
<!--[if mso]>
</td>
<![endif]-->
<!--[if mso]>
</tr>
</table>
<![endif]-->
</td>
</tr>
</tbody>
</table>
Original Facebook feed - click on comments to see original feed

Related

How to create a fluid html table that adjusts from 3x2 to 2x3 for responsive email?

I'm working on a responsive email template, and I really would like a table layout for featured products, 3x2 on desktop, 2x3 on mobile.
Currently, I am using a table with cells that change to display as inline-block for mobile clients. However, this breaks in Outlook and Thunderbird, as they display all cells in a single row. I have tried floating the elements, but again they break.
Table Grid 3x2 to 2x3
CSS
#media screen and (max-width: 600px) {
.stack2 {
width: 50% !important;
}
}
.stack2 {
display: inline-block;
box-sizing: border-box;
}
HTML
<table width="100%" cellpadding="0px" cellspacing="0px" border="0px">
<tr>
<!-- Product #1 -->
<td class="stack2" width="33.33%" style="padding:20px;">
</td>
<!-- Product #2 -->
<td class="stack2" width="33.33%" style="padding:20px;">
</td>
<!-- Product #3 -->
<td class="stack2" width="33.33%" style="padding:20px;">
</td>
<!-- Product #4 -->
<td class="stack2" width="33.33%" style="padding:20px;">
</td>
<!-- Product #5 -->
<td class="stack2" width="33.33%" style="padding:20px;">
</td>
<!-- Product #6 -->
<td class="stack2" width="33.33%" style="padding:20px;">
</td>
</tr>
</table>
Don't use table cells for this. Cells will continue to stack side by side in a row and that is their natural and intended behaviour.
The only way for a table cell to appear underneath others, would be in another row.
Your implementation goes against HTML logic.
I would go with tables for this instead. That way they will easily stack and rearrange depending on the width you give them. Just bear in mind that you will need to use ghost tables to make the tables sit side by side in Outlook.
Here is a loose example (Ghost tables included) for you to adapt to work for you:
<table border="0" cellspacing="0" cellpadding="0" class="FullWidthOnMobile" style="width:600px;">
<tr>
<td>
<!--[if (gte mso 9)|(IE)]>
<table border="0" cellspacing="0" cellpadding="0" style="width:100%;">
<tr>
<td style="width:200px;">
<![endif]-->
<table align="left" border="0" cellspacing="0" cellpadding="0" class="HalfWidthOnMobile" style="width:200px;">
<tr>
<td bgcolor="red" style="padding:10px 0; border:1px solid #fff;"> </td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
<td>
<![endif]-->
<table align="left" border="0" cellspacing="0" cellpadding="0" class="HalfWidthOnMobile" style="width:200px;">
<tr>
<td bgcolor="red" style="padding:10px 0; border:1px solid #fff;"> </td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
<td style="width:200px;">
<![endif]-->
<table align="left" border="0" cellspacing="0" cellpadding="0" class="HalfWidthOnMobile" style="width:200px;">
<tr>
<td bgcolor="red" style="padding:10px 0; border:1px solid #fff;"> </td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
<tr>
<td style="width:200px;">
<![endif]-->
<table align="left" border="0" cellspacing="0" cellpadding="0" class="HalfWidthOnMobile" style="width:200px;">
<tr>
<td bgcolor="red" style="padding:10px 0; border:1px solid #fff;"> </td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
<td>
<![endif]-->
<table align="left" border="0" cellspacing="0" cellpadding="0" class="HalfWidthOnMobile" style="width:200px;">
<tr>
<td bgcolor="red" style="padding:10px 0; border:1px solid #fff;"> </td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
<td style="width:200px;">
<![endif]-->
<table align="left" border="0" cellspacing="0" cellpadding="0" class="HalfWidthOnMobile" style="width:200px;">
<tr>
<td bgcolor="red" style="padding:10px 0; border:1px solid #fff;"> </td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
Media queries I used. Again adapt these as I named for simplicity of understanding what I'm doing:
#media only screen and (max-width:600px){
.FullWidthOnMobile{width:100%!important;min-width:100%!important;}
.HalfWidthOnMobile{width:50%!important;min-width:50%!important;}
}

While generating PDF in ColdFusion, Rowspan is not working properly for RTL direction (ex: Arabic)

I have a table structure in HTML where I have to use rowspan and RTL(Right To Left) direction for Arabic characters. But while converting this HTML to PDF, rowspan is not working as expected. Assuming this is a bug in ColdFusion where an HTML with rowsapn and RTL direction is not working correctly.
Note that this is working fine for LTR (Left To Right) direction (ex: English Characters). But I need to use RTL direction since Arabic characters need to be displayed in PDF.
Any idea why this is not working?
Sample Code :
<cfdocument format="PDF" filename="C:\test.pdf" overwrite="true">
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
table#mainTable {direction:rtl;}
</style>
</head>
<body>
<cfoutput>
<table id="mainTable">
<tr>
<td>Tariff</td>
<td>Description</td>
<td>Quantity</td>
<td>Unit Price</td>
<td>Amount</td>
</tr>
<tr>
<td rowspan="7" >Customer Level Charges</td>
<td>9999123456</td>
<td>18.16</td>
<td>6</td>
<td>108.96</td>
</tr>
<tr>
<td>9999123456</td>
<td>18.16</td>
<td>6</td>
<td>108.96</td>
</tr>
<tr>
<td>9999123456</td>
<td>18.16</td>
<td>6</td>
<td>108.96</td>
</tr>
<tr>
<td>Adjustments</td>
<td colspan="4">-20</td>
</tr>
<tr>
<td>This Month Amount</td>
<td colspan="4">1091.92</td>
</tr>
<tr>
<td>Last Month outstanding Amount</td>
<td colspan="4">0</td>
</tr>
<tr>
<td>Total</td>
<td colspan="4">1146.51</td>
</tr>
</table>
</cfoutput>
</body>
</html>
</cfdocument>
Expected Result
It should work as how it is working in Browser, screen shot attached.

How to find relative Xpath if element is not having unique identifier

Please someone help me to write relative Xpath for below:
html/body/div[1]/table/tbody/tr/td[2]/table/tbody/tr[4]/td/table/tbody/tr/td[2]/table/tbody/tr[2]/td[1]/table[1]/tbody/tr[2]/td
As it do not contains any unique identifier firepath is giving an absolute Xpath but i want to use relative Xpath.
As the provided html code doesn't contains any class or id, thus you need to use below mentioned Xpath only:
html/body/div[1]/table/tbody/tr[3]/td/table/tbody/tr[1]/td[2]/div/font/b
But if you add some class or id in your html like shown below:
<html><body><div><table width="100%" cellspacing="0" cellpadding="0" border="0"> <tbody> <tr> <tr> <tr valign="top"> <td height="101"> <table width="270" cellspacing="0" cellpadding="2" border="0"> <tbody> <tr bgcolor="#CCCCCC"> <td width="80%"> <td width="20%"> <div id="price" align="right"> <font face="Arial, Helvetica, sans-serif, Verdana" size="2"> <b>$398</b> </font> </div> </td> </tr> <tr> <tr bgcolor="#CCCCCC"> <tr> <tr bgcolor="#CCCCCC"> </tbody> </table> </td> </tr> </tbody> </table></div></body></html>
Then you can use below mentioned Xpath:
.//*[#id='price']/font/b

How to interchange the positions of 2 blocks using anything align or float

I want to interchange the positions of two blocks using some trick for email newsletter. I want the first block to the right and second block to the left.
Tried these:
<table cellpadding="0" cellspacing="0" border="0" width="600">
<tr>
<td>
<table cellpadding="0" cellspacing="0" border="0" width="300" align="right">
content 1
</table>
<table cellpadding="0" cellspacing="0" border="0" width="300" align="left">
content 2
</table>
</td>
</tr>
</table>
<table>
<tr>
<td width="300" align="right" class="column">
content 1
</td>
<td width="300" align="left" class="column">
content 2
</td>
</tr>
</table>
But unfortunately none of them worked. Any other suggestion?
use dir="rtl" on container table and dir="ltr" on the interior tables or tds. This makes it so that the container reads the last table as the beginning and displays on left, but when stacked, it still stacks based on order of tables inside parent.
see below:
<table dir="rtl" cellpadding="0" cellspacing="0" border="0" width="600">
<tr>
<td>
<table dir="ltr" cellpadding="0" cellspacing="0" border="0" width="300" align="right">
content 1
</table>
<table dir="ltr" cellpadding="0" cellspacing="0" border="0" width="300" align="left">
content 2
</table>
</td>
</tr>
</table>
<table dir="rtl">
<tr>
<td dir="ltr" width="300" align="right" class="column">
content 1
</td>
<td dir="ltr" width="300" align="left" class="column">
content 2
</td>
</tr>
</table>

Table Headers in PDF module in Play Framework

I'm using play framework. I am able to generate the PDF using PDF module. My Problem here is i want to add the table headers in every page. Here is my code
<table width="100%" border="1" id="example" cellspacing="0" cellpadding="0" style="border-collapse: collapse" class="-fs-table-paginate: paginate;">
<thead>
<tr>
<th align="center"><b>Items</b></th>
<th align="center"><b>Quantity</b></th>
<th align="center"><b>Unit Price</b></th>
<th align="center"><b>Amount(Rs).</b></th>
</tr>
</thead>
.....
</table>
I saw here. i added -fs-table-paginate: paginate; in the class attibute. But the table headers are not continued in the next page.
I don't know how to use this. Can you help me Pl.
EDIT: can anyont help me please....
You should add "-fs-table-paginate: paginate;" to the style attribute, not to the class attribute:
<table width="100%" border="1" id="example" cellspacing="0" cellpadding="0" style="border-collapse: collapse; -fs-table-paginate: paginate;">