Expand my Community achievements bar.

SOLVED

Bug: Dynamic Content Hidden Character

Avatar

Level 2

Hello,

I'm having an issue where dynamic content is adding weird hidden characters above and below the variant blocks. There's no way to remove this and it's being included in the send, breaking my emails. I have custom HTML set up in compatibility mode and am not interested in following the email designer code structure.

Screen Shot 2019-08-07 at 10.02.28 pm.png

Any help with this would be greatly appreciated.

Thanks,

Tom

1 Accepted Solution

Avatar

Correct answer by
Level 2

Thanks for trying to help. These characters are being added by the editor around dynamic content and there's no way of removing them unless I switch to the legacy editor. I might log a support ticket to see if they can have a look.

Cheers,

Tom

View solution in original post

5 Replies

Avatar

Level 2
<!DOCTYPE html>

<html lang="en" xmlns="https://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">

<head>

   <meta charset="utf-8">

   <meta name="viewport" content="width=device-width">

   <meta http-equiv="X-UA-Compatible" content="IE=edge">

   <meta name="x-apple-disable-message-reformatting">

   <meta name="format-detection" content="telephone=no,address=no,email=no,date=no,url=no">

   <title>Test</title>

  

   <!-- Web Font : BEGIN -->

   <!--[if mso]>

  <style>

  * {

  font-family: Trebuchet MS, sans-serif !important;

  }

  </style>

  <![endif]-->

   <!--[if !mso]><!-->

   <link href="https://fonts.googleapis.com/css?family=Titillium+Web:300,400,600&display=swap" rel="stylesheet">

   <!--<![endif]-->

   <!-- Web Font : END -->


   <!-- CSS Reset : BEGIN -->

  <style>


  html,

   body {

   margin: 0 !important;

   padding: 0 !important;

   height: 100% !important;

   width: 100% !important;

  }

   * {

   -ms-text-size-adjust: 100%;

   -webkit-text-size-adjust: 100%;

   -webkit-font-smoothing: antialiased;

   -moz-osx-font-smoothing: grayscale;

  }

  div[style*="margin: 16px 0"] {

   margin: 0 !important;

  }

  table,

   td {

   mso-table-lspace: 0pt !important;

   mso-table-rspace: 0pt !important;

  }

  table {

   border-spacing: 0 !important;

   border-collapse: collapse !important;

   table-layout: fixed !important;

   margin: 0 auto !important;

  }

  a {

   text-decoration: none;

   color: #333333;

  }

  img {

   -ms-interpolation-mode: bicubic;

  }

  a[x-apple-data-detectors],

   .unstyle-auto-detected-links a,

   .aBn {

   border-bottom: 0 !important;

   cursor: default !important;

   color: inherit !important;

   text-decoration: none !important;

   font-size: inherit !important;

   font-family: inherit !important;

   font-weight: inherit !important;

   line-height: inherit !important;

  }

  .im {

   color: inherit !important;

  }

  .a6S {

   display: none !important;

   opacity: 0.01 !important;

  }

  img.g-img + div {

   display: none !important;

  }

   @media only screen and (min-device-width: 320px) and (max-device-width: 374px) {

   u ~ div .email-container {

   min-width: 320px !important;

  }

  }

   @media only screen and (min-device-width: 375px) and (max-device-width: 413px) {

   u ~ div .email-container {

   min-width: 375px !important;

  }

  }

   @media only screen and (min-device-width: 414px) {

   u ~ div .email-container {

   min-width: 414px !important;

  }

  }


  </style>

   <!--[if gte mso 9]>

  <xml>

  <o:OfficeDocumentSettings>

  <o:AllowPNG/>

  <o:PixelsPerInch>96</o:PixelsPerInch>

  </o:OfficeDocumentSettings>

  </xml>

  <![endif]-->

   <!-- CSS Reset : END -->


   <!-- Progressive Enhancements : BEGIN -->

  <style>


   @media screen and (max-width: 600px) {

   .email-container,

   .full-width {

   width: 100% !important;

   margin: auto !important;

  }

   .image-mobile {

   width: 100% !important;

   height: auto !important;

  }

   .stack-column,

   .stack-column-center {

   display: block !important;

   width: 100% !important;

   max-width: 100% !important;

   min-width: 100% !important;

   direction: ltr !important;

  }

   .stack-column-center {

   text-align: center !important;

  }

   .center-on-narrow {

   text-align: center !important;

   display: block !important;

   margin-left: auto !important;

   margin-right: auto !important;

   float: none !important;

  }

   table.center-on-narrow {

   display: inline-block !important;

  }

   .hide-content {

   display: none !important;

   max-height: 0 !important;

   mso-hide: all !important;

   overflow: hidden !important;

   visibility: hidden !important;

  }

   .show-content {

   display: block !important;

   max-height: none !important;

   mso-hide: none !important;

   overflow: visible !important;

   visibility: visible !important;

  }

   .collapse-height {

   height: auto !important;

  }

   .px-0 {

   padding-left: 0px !important;

   padding-right: 0px !important;

  }

   .px-10 {

   padding-left: 10px !important;

   padding-right: 10px !important;

  }

   .px-20 {

   padding-left: 20px !important;

   padding-right: 20px !important;

  }

   .px-30 {

   padding-left: 30px !important;

   padding-right: 30px !important;

  }

   .pb-0 {

   padding-bottom: 0px !important;

  }

   .pb-10 {

   padding-bottom: 10px !important;

  }

   .pb-20 {

   padding-bottom: 20px !important;

  }

   .pb-30 {

   padding-bottom: 30px !important;

  }

   .pt-0 {

   padding-top: 0px !important;

  }

   .pt-10 {

   padding-top: 10px !important;

  }

   .pt-20 {

   padding-top: 20px !important;

  }

   .pt-30 {

   padding-top: 30px !important;

  }

   .fs-account {

   font-size: 9px !important;

   line-height: 16px !important;

  }

   .fs-13 {

   font-size: 13px !important;

   line-height: 20px !important;

  }

   .fs-14 {

   font-size: 14px !important;

   line-height: 21px !important;

  }

   .fs-15 {

   font-size: 15px !important;

   line-height: 23px !important;

  }

   .fs-16 {

   font-size: 16px !important;

   line-height: 24px !important;

  }

   .fs-22 {

   font-size: 22px !important;

   line-height: 34px !important;

  }

  }

   @media only screen and (max-device-width: 414px) {

   .hide-content-sml {

   display: none !important;

   max-height: 0 !important;

   mso-hide: all !important;

   overflow: hidden !important;

   visibility: hidden !important;

  }

   .show-content-sml {

   display: block !important;

   max-height: none !important;

   mso-hide: none !important;

   overflow: visible !important;

   visibility: visible !important;

  }

  }


  </style>

   <!-- Progressive Enhancements : END -->

  

</head>

<body width="100%" style="margin: 0; padding: 0 !important; mso-line-height-rule: exactly; background-color: #E5E5E5;">

   <center style="width: 100%; background-color: #E5E5E5;">

   <!--[if mso | IE]>

  <table cellspacing="0" cellpadding="0" border="0" width="100%" style="background-color: #E5E5E5;">

  <tr>

  <td>

  <![endif]-->


   <div class="nl-dce-variant nl-dce-variant-block nl-dce-if nl-dce-multiconditional" data-nl-variant-group="1564624641933" data-nl-variant-label="Test" data-nl-variant-index="1" data-nl-expr="" data-nl-condition-type="multiple">

   <table align="center" cellspacing="0" cellpadding="0" border="0" width="600" style="margin: auto; width: 600px;" class="email-container">


   <tr>

   <td style="padding: 0px; background-color: #FFFFFF;">

  Test

   </td>

   </tr>


   </table>

   </div>


   <div class="nl-dce-variant nl-dce-variant-block nl-dce-if nl-dce-multiconditional nl-dce-current-variant" data-nl-variant-group="1564624641933" data-nl-variant-label="Default" data-nl-variant-index="0" data-nl-expr="" data-nl-condition-type="multiple" data-nl-variant-default="true">

   <table align="center" cellspacing="0" cellpadding="0" border="0" width="600" style="margin: auto; width: 600px;" class="email-container">


   <tr>

   <td style="padding: 0px; background-color: #FFFFFF;">

  Test Default

   </td>

   </tr>


   </table>

   </div>


   <!--[if mso | IE]>

  </td>

  </tr>

  </table>

  <![endif]-->

   </center>

</body>

</html>

Avatar

Level 2

It works when you paste the html into the delivery, but once you save it, close the window then reopen, these blank characters are added to the template which can be viewed using inspect element.

Avatar

Level 4

I just attempted to create this template and I do not see any extra characters anywhere.

The code &#65279; is a zero-width no-break space character. (http://www.fileformat.info/info/unicode/char/feff/index.htm)

Adobe should not insert something like that, but if you have designed your template via something like Dreamviewer and then copy-paste template code into Adobe, it might sneak in there accidentally. Adobe will allow you to past Unicode characters into the template, but when the template is saved, they will be converted into their XML representation.

I suggest to install something like notepad++, open new text file and set UTF-8 encoding. Copy your HTML code into this text file and save it. It will convert any Unicode character into "?" or an empty string. Now just delete them and copy the clean code to Adobe.

Avatar

Correct answer by
Level 2

Thanks for trying to help. These characters are being added by the editor around dynamic content and there's no way of removing them unless I switch to the legacy editor. I might log a support ticket to see if they can have a look.

Cheers,

Tom