Editor Strips Out Background Attribute

Ray Li

Member
Whenever a template is saved, any background="" attribute is stripped out. This makes it extremely difficult to create newsletters that look consistent across all email clients. For example, Outlook does not support inline CSS background/background-url. Can you look into a fix or is there a way to disable the stripping out of attirbutes? Thank you!

Answer:
Disabling Tidy keeps the "background" attribute from being stripped out. Easy fix and now my templates display PERFECTLY in Gmail, Yahoo, Outlook, and mobile!
How to disable Tidy --> https://kb.mailwizz.com/articles/can-tell-mailwizz-use-not-use-phps-tidy-extension/
 
Last edited:

frm.mwz

Well-Known Member
Whenever a template is saved, any background="" attribute is stripped out. This makes it extremely difficult to create newsletters that look consistent across all email clients. For example, Outlook does not support inline CSS background/background-url. Can you look into a fix or is there a way to disable the stripping out of attirbutes? Thank you!

could be related to php tidy and its settings
https://forum.mailwizz.com/posts/12561
 

Ray Li

Member
I have attached my email template. In the email template on line 49 is this code:
HTML:
<table border="0" cellpadding="0" cellspacing="0" style="background:#E10150 url('http://appwebsitetemplate.com/emailtemplates/images/AWT-Header-Bright-Checkmark.png');border-collapse:collapse;width:100%" bgcolor="#02b3e3" background="http://appwebsitetemplate.com/emailtemplates/images/AWT-Header-Bright-Checkmark.png">
Upon saving the template, "background="http://appwebsitetemplate.com/emailtemplates/images/AWT-Header-Bright-Checkmark.png"" is stripped out. I don't think this is PHP Tidy because the code is only stripped out when the template is saved, not when it is beautified.
 

Attachments

  • Download Email.zip
    195.1 KB · Views: 6

frm.mwz

Well-Known Member
I have attached my email template. In the email template on line 49 is this code:
HTML:
<table border="0" cellpadding="0" cellspacing="0" style="background:#E10150 url('http://appwebsitetemplate.com/emailtemplates/images/AWT-Header-Bright-Checkmark.png');border-collapse:collapse;width:100%" bgcolor="#02b3e3" background="http://appwebsitetemplate.com/emailtemplates/images/AWT-Header-Bright-Checkmark.png">
Upon saving the template, "background="http://appwebsitetemplate.com/emailtemplates/images/AWT-Header-Bright-Checkmark.png"" is stripped out. I don't think this is PHP Tidy because the code is only stripped out when the template is saved, not when it is beautified.

try this reformatted file
see if you have defined class="CToWUd"
 

Attachments

  • downloademail.zip
    1.7 KB · Views: 3

Ray Li

Member
try this reformatted file
see if you have defined class="CToWUd"
There's a class="CToWUd" in there and I don't know how it got in there. That class is not in the original file I uploaded. I tried the reformatted version but Outlook only supports background="" which the editor strips out. Thanks for taking a look and trying to help!
 

frm.mwz

Well-Known Member
There's a class="CToWUd" in there and I don't know how it got in there. That class is not in the original file I uploaded. I tried the reformatted version but Outlook only supports background="" which the editor strips out. Thanks for taking a look and trying to help!

just re-downloaded your file from above post with file link

and the class="CToWUd" is in here:
href="http://appwebsitetemplate.com" style="text-decoration:none"><img alt="App Website Template" border="0" height="38" width="400" src="http://appwebsitetemplate.com/emailtemplates/images/AWT-Text-Header.png" style="display:block;width:400px!important;font-family:'Open+Sans','Open Sans',Helvetica,Arial,sans-serif;font-size:22px;line-height:26px;color:#000000;text-transform:uppercase;text-align:center;letter-spacing:1px" class="CToWUd"></a>

or have i misunderstood u somehow?


the new file i posted should also be standards' compliant and is 43% smaller (makes a difference if u send it a few million times...)
 
Last edited:

frm.mwz

Well-Known Member
There's a class="CToWUd" in there and I don't know how it got in there. That class is not in the original file I uploaded. I tried the reformatted version but Outlook only supports background="" which the editor strips out. Thanks for taking a look and trying to help!

maybe these can help?

https://litmus.com/blog/a-guide-to-rendering-differences-in-microsoft-outlook-clients

https://www.outlook-apps.com/html-ignored-by-outlook/

https://support.sendgrid.com/hc/en-...o-s-and-Dont-s-of-Cross-Platform-Email-Design
says
BACKGROUNDS
  • Use the older more basic background HTML tags
    • "background-image" ; "bgcolor" ; "background"
    • Many browsers and clients experience issues when trying to support compound CSS values so be sure to use individual values such as "background-image" and "background-repeat"
  • Always offer reset background colors or fall back background colors to defer to if your specific background isn't supported
 
Last edited:

Ray Li

Member
just re-downloaded your file from above post with file link

and the class="CToWUd" is in here:
href="http://appwebsitetemplate.com" style="text-decoration:none"><img alt="App Website Template" border="0" height="38" width="400" src="http://appwebsitetemplate.com/emailtemplates/images/AWT-Text-Header.png" style="display:block;width:400px!important;font-family:'Open+Sans','Open Sans',Helvetica,Arial,sans-serif;font-size:22px;line-height:26px;color:#000000;text-transform:uppercase;text-align:center;letter-spacing:1px" class="CToWUd"></a>
Thanks for all your help so far. I redownloaded my file and indeed the extraneous class is in there. How embarrassing :oops: It should not have any effect on the editor and cause the background="" attribute to be stripped out.
 

Ray Li

Member
BACKGROUNDS
  • Use the older more basic background HTML tags
    • "background-image" ; "bgcolor" ; "background"
    • Many browsers and clients experience issues when trying to support compound CSS values so be sure to use individual values such as "background-image" and "background-repeat"
  • Always offer reset background colors or fall back background colors to defer to if your specific background isn't supported
The problem with Mailwizz is that it DOES NOT allow the basic background HTML tags. When you save the template, the editor strips out the older HTML and only allows the CSS method. This is a issue within Mailwizz that heavily interferes with proper email templates.
 

Ray Li

Member
@Ray Li - I can tell you for sure the background attribute is not removed, see : https://www.dropbox.com/s/pi3sqfpy88254l8/Screenshot 2016-06-13 10.56.32.png?dl=0 which is from your template.
Thank you for taking a look. The template looks and displays OK within all email clients that support CSS styles. Within the editor, it shows the background because the CSS background is working. What the problem is is that the background="" tag has been stripped out and the email will not display the background in Outlook or Hotmail.
  • style="background-url(http://image)" does work and is not stripped out
  • background="http://image" is stripped out by the editor
Hopefully this explains my problem better. Thank you for investigating!
 

Manos

New Member
Just found another problem (or I need to study more) you can't use something like that in a template:

Code:
      <script type="application/ld+json">
        {
          "@context":             "schema.org",
          "@type":                "EventReservation",
          "reservationNumber":    "IO12345",
          "underName": "John Smith",
          "reservationFor": {
            "@type": "Event",
            "name":               "Google I/O 2013",
            "startDate":          "2013-05-15T08:30-08:00",
            "location":           "Moscone Center, 800 Howard St., San Francisco, CA 94103"
          }
        }
        </script>
 

frm.mwz

Well-Known Member
@twisted1919
can u make a button/choice
so that one could just cut & paste an html part and a text part
and the app would NOT try to be clever and change things (optimize code and thereby partially change it (and hence sometimes void the original purpose)),
but just leave the inserted parts in their original form...
(only check for the required links (unsub & co addr))
?
 

twisted1919

Administrator
Staff member
@Manos - javascript doesn't work in emails, thus not allowed.
can u make a button/choice
so that one could just cut & paste an html part and a text part
here's the problem, if you paste very broken html this way, then the parser will not be able to extract links, images and so on, so it's not really an option.
 

frm.mwz

Well-Known Member
@Manos - javascript doesn't work in emails, thus not allowed.

here's the problem, if you paste very broken html this way, then the parser will not be able to extract links, images and so on, so it's not really an option.

perhaps one could do it like this then:
allow cut & paste of html & text part independently and not change anything
except if what the parser needs minimally is unavailable (and then the parser could list which parts are missing)

this way, the user would be in control
 

frm.mwz

Well-Known Member
@frm.mwz - remember that the user might not always be well intended and the code allowed can do harm as well ;)

...but then 'the user' can abuse the mailer, can't they?
:p

...do all mailers block users from simply inserting their html email code and separate text part? perhaps it could be for the admin to decide if the check is switched on? understandably, if many different users comppse html emails, then it might be useful to have the admin switch it on?

...as such one must advocate for freedom of use and maximum end user control!

:cool:
 
Top