VML element styling when adding button to email

(0) Share

Report

Posted on by Community Member

Hi,

When you add <div data-editorblocktype="Button"> around your "a attribute" (link) and using the designer toolbox (on the right in the screen) D365 for Marketing designer will automaticly add VML element to the HTML. This results in buttons that are not displayed correctly in Micorsoft Outlook, example;

The first button is the incorrect one (with <div data-editorblocktype="Button">)
The second button is the one how it should be (this one is without <div data-editorblocktype="Button">)

The automaticly added VML-code;

<!--[if mso]><div align=""><v:rect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://link/" style='height:20px;v-text-anchor:middle;width:178px;' strokecolor='rgba(0, 0, 0, 0)' stroke='false' strokeweight='0' fillcolor='rgba(0, 0, 0, 0)' data-msdyn-tracking-id='6925d55b16ac21559907217027'><w:anchorlock></w:anchorlock><center style='color:rgb(255, 255, 255);font-family:Tahoma,Arial,sans-serif;font-size:16px;font-weight:bold; mso-line-height-rule:exactly;line-height:16px'>Read more 12</center></v:rect></div><![endif]-->

Original HTML code with <div data-editorblocktype="Button">

<table width="100%" cellpadding="0" cellspacing="0">
  <tbody><tr>
	<td mc:edit="block_17" class="active-t btn-03" align="center" style='background:#ff6c37;mso-padding-alt:14px 24px;font:700 16px/20px Arial, Helvetica, sans-serif;border:1px solid #ff6c37;border-radius:4px;'>
	  <a style='display:block;text-decoration:none;color:#fff;padding:14px 24px;' href='http://link/">Read more 12</a>
	</td>
  </tr>
</tbody></table>

Orginal HTML code without:

<table width="100%" cellpadding="0" cellspacing="0">
  <tbody><tr>
	<td mc:edit="block_17" class="active-t btn-03" align="center" style='background:#ff6c37;mso-padding-alt:14px 24px;font:700 16px/20px Arial, Helvetica, sans-serif;border:1px solid #ff6c37;border-radius:4px;'>
	  <div data-container='true'><div data-editorblocktype='Button'><a style='display:block;text-decoration:none;color:#fff;padding:14px 24px;' href='http://link/">Read more 12</a></div></div>
	</td>
  </tr>
</tbody></table>

Is there anyway to disable this automatic functionality or to influence the styling of the VML element?

Thank you in advance!

Categories:

I have the same question (0)

All responses (4)

Answers (0)

Suggested answer

cloflyMao 25,210 on at

Like (0)

Report
Copy link

Link copied!
Hi Nicks,

I created a button element with your background color. The generated code are below:



<a class="buttonClass" data-msdyn-tracking-id="41e7d1876788a1560146159294" href="http://www.google.com" style='mso-hide: all; text-align: center; margin-right: auto; margin-left: auto; display: block; font-weight: bold; background-color: rgb(255, 108, 55); color: rgb(255, 255, 255);'>Click here</a>

How did you edit your button element? Have you modified the generated VML code?

It's recommended to use Designer toolbox by system.

https://docs.microsoft.com/en-us/dynamics365/customer-engagement/marketing/custom-template-attributes#enable-the-drag-and-drop-editor-after-import

Regards,

Clofly

Was this reply helpful? Yes No
Community Member on at

Like (0)

Report
Copy link

Link copied!

Hi Clofly,

Thank you for your reply.

I did not modify the VML code, I will test te button more with using the Designer toolbox. I hope i can test it today, i will let you know if using the toolbox will be fine for me.

Best,

Nick

Was this reply helpful? Yes No
Community Member on at

Like (0)

Report
Copy link

Link copied!
Hi Clofly,

I added your HTML button code to my template and test it in outlook;

<table width="100%" cellpadding="0" cellspacing="0" aria-role="presentation"> <tbody><tr> <td mc:edit="block_19" class="active-t btn-03" align="center" style="background:#ff6c37;mso-padding-alt:14px 24px;font:700 16px/20px Arial, Helvetica, sans-serif;border:1px solid #ff6c37;border-radius:4px;"> <div data-editorblocktype="Button"><a class="buttonClass" href="http://www.google.com" style='mso-hide: all; text-align: center; margin-right: auto; margin-left: auto; display: block; font-weight: bold; background-color: rgb(255, 108, 55); color: rgb(255, 255, 255);'>Click here</a></div> </td> </tr> </tbody></table>

Unfortunately it still displays the button wrong in outlook (Outlook 2016), on an iphone it looks great (because it doesn't use the VML code on iphone):

I've used the designer toolbox, the "default" settings are shown below;

Changing the height will result in;

The VML is not acting the right way within the table / td element. Can this be fixed? Or should the code be modified without using the td element for styling the button? Also; how does the toobox desides the defualt height = 20 px? Can this be set with another height by default?

Thank you.

Best,

Nick

Was this reply helpful? Yes No
cloflyMao 25,210 on at

Like (0)

Report
Copy link

Link copied!

Hi Nick,

I just got an update of marketing application 6 hours ago(now my version is 9.1.0000.5229) and noticed that VML code has been removed from generated code.

My suggestions are below:

1. Remove your issued button totally and add a new button with designer tool box.

2. Remove VML code and "If mso" statement, because these rules are specific to Outlook, then copy all elements within table tag(include table tag) to fully replace the origin.

It seems the VML code elements covered elements in table tag.

So, for your question 1: as my suggestion, you could remove VML code.

For q2: table and td tags are used to make a vertically centered text. You could create your own button with customized CSS rule in HTML editor, but it would be better to just use designer tool if you were not familiar with CSS.

For q3: my default height for button element is 50px in my environment, unfortunately I haven't found option to set this value by default so far. However, you can edit it anytime when editing page.

Regards,

Clofly

Was this reply helpful? Yes No