Re: Errors in email template code

Anonymous · ‎08-21-2014

I tried to approve a new email template and got an error message.

One or more Mkteditable sections have errors. Make sure you have at least one and that they all have valid IDs.

I then went into the Validate Code section and it showed these errors. Are these grave issues? If not, how do I bypass this so I can approve the template?

line 11 column 1 - Warning: <style> isn't allowed in <body> elements

line 10 column 1 - Info: <body> previously mentioned

line 370 column 17 - Warning: <table> attribute "cellpadding" has invalid value "10px"

line 453 column 10 - Warning: <table> attribute "cellpadding" has invalid value "10px"

line 525 column 12 - Warning: <table> attribute "cellpadding" has invalid value "10px"

line 692 column 10 - Warning: <table> attribute "cellpadding" has invalid value "10px"

line 777 column 12 - Warning: <table> attribute "cellpadding" has invalid value "10px"

line 887 column 10 - Warning: <table> attribute "cellpadding" has invalid value "10px"

line 970 column 17 - Warning: <table> attribute "cellpadding" has invalid value "10px"

line 1019 column 10 - Warning: <table> attribute "cellpadding" has invalid value "10px"

Anonymous · ‎08-27-2014

Eric is correct, you cannot place the div under the table tag. Also, it cannot be inside of the tr tag. It has to be inside the td tag of a table otherwise it breaks the table. We moved the div tag in David's code outside of the table, but inside of the td tag for the table it was nested under. This gives the user the ability to remove rows within the table in the email editor.

View solution in original post

Eric_Salamon1 · ‎08-21-2014

First cell padding should be used in the td tag not the table tag.

Example:
<table>
<tr>
<td cellpadding="10px">
</td>
</tr>
</table>

Second it looks like you put a style tag seperate from the body tag what you should have done is <body style=";">.

Third you should confirm that all the mkeditable sections have different id's because the code only likes new id's to make life easier for non coders.

Finally it looks like you are missing a closing tag or have one too many closing tags and your code is being throwen off.

Anonymous · ‎08-21-2014

Cellpadding does not have a pixel value. Should simply be "10".

Anonymous · ‎08-21-2014

I was running into this issue with code that was given to me by one of our email designers. I found that the style tag was opened twice, but closed once in the <head> element . Removing the second open tag fixed my issue.

I could be wrong, but it is my understanding that the <style> element needs to be in between the <head> and </head> tags. If it isn't, the message may still render in browsers, but it will not pass validation tests. Try moving the <style> element to see if that lets you approve the message.

Eric is spot on with the making sure the editable sections have unique ids and are all closed.

Have you been able to approve the message?

Anonymous · ‎08-25-2014

Thanks all. We were able to fix the issues with the email template.

In ours we have three separate editable content areas in a row: three paragraphs of text. If we delete the content from the first content area, the template displays a blank space in its place. Is there a way to truly delete a content area so the content area below it moves up?

We have lines, images, headers and captions in our template as well and we're not likely to use them all the time. I was hoping we'd be able to completely delete them from our template in the WYSIWYG but maybe this is wishful thinking?

David

Anonymous · ‎08-25-2014

Glad you got the template approved.

When editing an email, deleting everything in an editable area will remove everything within the the editable section. The placeholder for that content section may be outside the editable tag. Here's a couple suggestions:

In the template, move the tag to allow users to delete the section entirely
Create template(s) for for each message layout (templates for 1, 2, and 3 content areas)
In the template, use one tag and place it just outside the first content area and close it right after the last content area.

I would go with option 2 if you want to keep it very simple for your users.

Hope this helps!

Eric_Salamon1 · ‎08-25-2014

The space doesnt really show up in the email. If you dont want to follow Joe's answer you can edit the HTML in the options at the top of the editer and delete the code for that section.

Joe's seggistion is very acurate and easy to do, but it is time consumming for a one off email.

Anonymous · ‎08-25-2014

Thanks Joe. Option 2 may be the best way to go but I’d like to better understand options 1 and 3.

If we decided to do option 1, how would we move the tag? Here’s an example of a code snippet with the ID in place.

<tbody><tr>
                   <td valign="top" class="fix-box">
                     <table border="0" cellspacing="0" cellpadding="0" align="left">
                       <tbody>
                       <tr>
                       <td style="font-size: 14px; line-height: 21px; font-family:open sans; color:#333333; text-align:left;">
<div class="mktEditable" id="Dynamic_Content">
                            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen.
                         </td>
                       </tr>
</div>

And if we wanted to do option 3, would that only work if our content areas were text? Or could this work if we also wanted to make images editable?

David

Anonymous · ‎08-25-2014

Love me some nested tables! What comes after the </div> tag? Do you close the table or do you create additional rows and cells where the rest of the content sits? Here's what I would try for option 1 and the code you provided, assuming you do not close the table right after the </div> tag.

<tbody><tr>
                   <td valign="top" class="fix-box">
                     <table border="0" cellspacing="0" cellpadding="0" align="left">
                       <tbody>
<div class="mktEditable" id="Dynamic_Content">

<tr>

                       <td style="font-size: 14px; line-height: 21px; font-family:open sans; color:#333333; text-align:left;">
~~<div class="mktEditable" id="Dynamic_Content">~~
                            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen.
                         </td>
                       </tr>
</div>

For option 3, this would work for images too. The editable sections allow users to edit ANYTHING that falls between the open and close. The down side of moving the tags (up and down, encompassing more) is that people can mess up formatting on accident depending on how you coded the template. If your users know HTML pretty well, they should be okay. If they are not familiar, they will probably mess something up or get confused.

If this doesn't cover your question or you need additional help with the code, feel free to email me what you have. You should have access to my work email on LinkedIn. I can't guarantee that I will solve it, but I will do my best to help point you in the right direction!

Eric_Salamon1 · ‎08-26-2014

Based on my understanding you can't have the div under the table heading before the tr the div should be in the td to make it function. Also to errors in the html validator in marketo may pop up. A simple solution is just to add the mkteditable class and the id to the tr and you should be able to click and adjust that entire section and remove the errors.