HTML in emails

Help Center
1

Hi all, I have an HTML challenge in an email editor. I have a small single cell table inside another table but cannot get the alignment / sizing right. It looks correct in the editor but the actual emai comes out wrong. I can live with the alignment issue but not the height issue. I have tried changing all sorts of HTML attributes but with no success. It is the MyTaxToday link that is the misbehaving table. (And there are only 2 tables for trial / testing purposes…)

image
image749×352 10.8 KB

image
image930×772 23 KB

This is the HTML for the top table:

MyTax.Today

Any help massively appreciated!!

2

Sorry @Hugo can’t access your HTML - perhaps paste it here?

3

Hi Brad,

thanks for looking at it, I really appreciate it.

here’s the html. I think the issue is that it is a table within a table. And it looks different if in a Make ‘send email’ module than if sent from Knack, so have had to tweak it (using lots of trial and error) depending on where it is being sent from.

FT_logo

Project Update

We have updated some important information on your project. Here is recap of what has changed:

Project: {SERVICES NEEDED}

Instructions & Comments:

{INSTRUCTIONS & COMMENTS}

Progress:

{PROGRESS} {PROGRESS BAR}

Due Date:

{DUE DATE}

Attachments:

{ATTACHMENT 1 (LINK)}

{ATTACHMENT 2 (LINK)}

////////////////////////////////////These are the two tables that aren't working (I onkly need 1) /////////////////////////////////
MyTax.Today
MyTax.Today
////////////////////////////////////These are the two tables that aren't working (I onkly need 1) /////////////////////////////////

Awarded Certificate US International Tax; by the AICPA
Toll Free Phone, Fax and Text 1-833-456-6272 (833-4-jmmcpa) ext 3
To set up a Zoom call appointment, click here https://calendly.com/johnmmatrascpa
This communication contains privileged and confidential information intended only for the use of the individuals or entities named above Under IRC Sec 7525 any communication for the purpose of securing tax advice includes an expectation of confidentiality.

4

Sorry Hugo, can you paste the actual HTML code (not what the editor renders).
Click on the code view to access it: <> top left of the toolbar.

5

Hi Brad,

sorry for the mess about - I pasted the HTML straight into the rely box but it still rendered. I’ll try again but if it does the same I have added the HTML here: FT Email HTML - Google Docs

FT_logo

Project Update

We have updated some important information on your project. Here is recap of what has changed:

Project: {SERVICES NEEDED}

Instructions & Comments:

{INSTRUCTIONS & COMMENTS}

Progress:

{PROGRESS} {PROGRESS BAR}

Due Date:

{DUE DATE}

Attachments:

{ATTACHMENT 1 (LINK)}

{ATTACHMENT 2 (LINK)}

MyTax.Today
MyTax.Today

Awarded Certificate US International Tax; by the AICPA
Toll Free Phone, Fax and Text 1-833-456-6272 (833-4-jmmcpa) ext 3
To set up a Zoom call appointment, click here https://calendly.com/johnmmatrascpa
This communication contains privileged and confidential information intended only for the use of the individuals or entities named above Under IRC Sec 7525 any communication for the purpose of securing tax advice includes an expectation of confidentiality.

Thanks (And happy to pay for a bit of time if it takes a while - don’t want to be a freeloader!)

6

Sorry Hugo, suddenly swamped.
Yeah to paste code here use the preformatted text option (gear > preformatted text) and that stops the forum page renderer and it formats the code nicely for easier reading. Here’s your current code:

<table style="height: 456px; width: 100%;" cellspacing="20">
<tbody>
<tr>
	<td style="width: 15%; background-color: #bdea62;">
	</td>
	<td style="width: 70%; vertical-align: top;">
		<p style="text-align: center;"><img src="https://s3.amazonaws.com/assets.knackhq.com/assets/62181d0bd8e825001e4de6cc/63c90c3cfe7e4a00126ffe51/original/ftlogo.png" alt="FT_logo" width="160" height="80">
		</p>
		<p style="text-align: center; font-size: 18.0pt; font-family: 'Arial'; color: #80868b;"><strong>Project Update</strong>
		</p>
		<p style="text-align: center; font-size: 10.0pt; font-family: 'Arial'; color: #80868b; margin-top: 0; margin-bottom: 0;"><strong>We have updated some important information on your project. Here is recap of what has changed:</strong><br>
		</p>
		<p style="text-align: left; font-size: 10.0pt; font-family: 'Arial'; color: #80868b; margin-top: 0; margin-bottom: 0;"><strong>Project: {SERVICES NEEDED}</strong>
		</p>
		<p style="text-align: left; font-size: 10.0pt; font-family: 'Arial'; color: #80868b; margin-top: 0; margin-bottom: 0;"><strong>Instructions &amp; Comments:</strong>
		</p>
		<p style="text-align: left; font-size: 10pt; font-family: Arial; color: rgb(128, 134, 139); margin-top: 0px; margin-bottom: 0px; margin-left: 20px;">{INSTRUCTIONS &amp; COMMENTS}
		</p>
		<p style="text-align: left; font-size: 10.0pt; font-family: 'Arial'; color: #80868b; margin-top: 0; margin-bottom: 0;"><strong>Progress:<span></span></strong>
		</p>
		<p style="text-align: left; font-size: 10pt; font-family: Arial; color: rgb(128, 134, 139); margin-top: 0px; margin-bottom: 0px; margin-left: 20px;">{PROGRESS} {PROGRESS BAR}
		</p>
		<p style="text-align: left; font-size: 10.0pt; font-family: 'Arial'; color: #80868b; margin-top: 0; margin-bottom: 0;"><strong>Due Date:<span></span></strong>
		</p>
		<p style="text-align: left; font-size: 10pt; font-family: Arial; color: rgb(128, 134, 139); margin-top: 0px; margin-bottom: 0px; margin-left: 20px;">{DUE DATE}
		</p>
		<p style="text-align: left; font-size: 10.0pt; font-family: 'Arial'; color: #80868b; margin-top: 0; margin-bottom: 0;"><strong>Attachments:</strong>
		</p>
		<p style="text-align: left; font-size: 10pt; font-family: Arial; color: rgb(128, 134, 139); margin-top: 0px; margin-bottom: 0px; margin-left: 20px;">{ATTACHMENT 1 (LINK)}
		</p>
		<p style="text-align: left; font-size: 10pt; font-family: Arial; color: rgb(128, 134, 139); margin-top: 0px; margin-bottom: 0px; margin-left: 20px;">{ATTACHMENT 2 (LINK)}
		</p>
		<table style="width: 91px; background-color: #bdea62; margin-left: auto; margin-right: auto;">
		<tbody>
		<tr "height:20px";="">
			<td style="text-align: center;"><strong><a title="MyTax.Today" href="https://fractionaltax.knack.com/customer-portal#customer/" target="_blank">MyTax.Today</a></strong>
			</td>
		</tr>
		</tbody>
		</table>
		<table style="height: 10px; background-color: #bdea62; margin-left: auto; margin-right: auto;" width="81">
		<tbody>
		<tr>
			<td style="height: 10px; width: 61px; text-align: center;"><strong><a title="MyTax.Today" href="https://fractionaltax.knack.com/customer-portal#customer/" target="_blank">MyTax.Today</a></strong>
			</td>
		</tr>
		</tbody>
		</table>
		<p style="text-align: center;"> <span style="font-size: 9.0pt; font-family: 'Arial',sans-serif; color: #80868b; letter-spacing: .25pt; margin-top: 0; margin-bottom: 0;" rel="font-size: 9.0pt; font-family: 'Arial',sans-serif; color: #80868b; letter-spacing: .25pt; margin-top: 0; margin-bottom: 0;">Awarded <strong>Certificate US International Tax</strong>; by the AICPA<br>
			Toll Free Phone, Fax and Text 1-833-456-6272 (833-4-jmmcpa) ext 3<br>
			To set up a Zoom call appointment, click here <a href="https://calendly.com/johnmmatrascpa" target="_blank">https://calendly.com/johnmmatrascpa</a><br>
			This communication contains privileged and confidential information intended only for the use of the individuals or entities named above Under IRC Sec 7525 any communication for the purpose of securing tax advice includes an expectation of confidentiality.</span>
		</p>
	</td>
	<td style="width: 15%; background-color: #bdea62;">
	</td>
</tr>
</tbody>
</table>

Email HTML is notoriously tricky with different clients rendering things differently - especially Outlook - see Guide to HTML Email: Coding Templates From Scratch | Campaign Monitor. I’d try a WYSISWYG editor like HTML Online Editor (w3schools.com) to tweak your code.

I think you’re on the right track using a table structure overall, and I’d remove the embedded table and use of paragraphs that’s driving your formatting there at the moment. Build a table with the structure you want, add the text & knack field codes, then format the cells for padding etc.

7

Thanks Brad that’s great. I’m currently looking for other button options but I think you’re right, ihaving a table within the table is causing the issue. I have it working fine from a Make module, but not from Knack…

I really appreciate the help, hopefully one day I can return the favour!