Why does Marketing Cloud wrap my rollover images with a href tag even when I try to delete the extra code itself?

Question

I'm working in Content Builder setting up my content modules. One of my modules is the social bar where I have rollover images on each social icon that change color. When I copy/paste the correct HTML code in there it shows as one thing and I save it out. Then when I go back to that same module and look at the HTML, its like marketing cloud adds extra code around my rollover images where it shouldn't causing the images to break.

For instance,

The HTML code looks like this first using one ahref tag around both images (the regular + rollover images):

<td align="center" valign="top">
<a class="rollover" href="mailto:[email protected]" style="text-decoration:none;"><img alt="MAIL" border="0" class="em_soc" height="28" src="https://emma-assets.s3.amazonaws.com/61b/955b21efa1cfde40a1df2ca2e92215ba/mail.png" style="display:block; max-width:28px; font-family:Arial, sans-serif; font-size:12px; line-height:15px; color:#525456;" width="28"/>
<div style="mso-hide:all;"><img alt="" border="0" class="em_soc_on" height="28" src="https://emma-assets.s3.amazonaws.com/61b/d00f1da87fae900911867808ca283a34/mail_oncopy.png" style="max-height:0px;display:block;" width="28"/></div>
</a></td>

But then when I save it out and go back to the code in marketing cloud, it changes to this:

<td align="center" valign="top">
<a class="rollover" href="mailto:[email protected]" style="text-decoration:none;"><img alt="MAIL" border="0" class="em_soc" height="28" src="https://emma-assets.s3.amazonaws.com/61b/955b21efa1cfde40a1df2ca2e92215ba/mail.png" style="display:block; max-width:28px; font-family:Arial, sans-serif; font-size:12px; line-height:15px; color:#525456;" width="28"> </a>
<div style="mso-hide:all;">
<a class="rollover" href="mailto:[email protected]" style="text-decoration:none;"><img alt="" border="0" class="em_soc_on" height="28" src="https://emma-assets.s3.amazonaws.com/61b/d00f1da87fae900911867808ca283a34/mail_oncopy.png" style="max-height:0px;display:block;" width="28"> </a>
</div>
</td>

So basically the red mail icon and the grey rollover mail icon get the same "hide" treatment when moused over.

How do I fix this?

Answer 1

Content Blocks in Marketing Cloud can add their own wrappers. If you're using Content Blocks to build reusable content, the HTML Content Block is the safest one, although it can still add some additional HTML.

The best way to avoid this is to use Code Snippets: https://help.salesforce.com/articleView?id=mc_ceb_create_code_snippet.htm&type=5

This is even mentioned in the documentation:

HTML content blocks can add extra code wrappers in your message. To preserve your code, use code snippets instead.