MailChimp Editable buttons inline styling is overridden

Question

I have created a MailChimp template with Editable Regions.

I've styled everything inline, and I have an editable button as so:

              <!-- button -->      
              <table class="button" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#ffffff" style="border-spacing: 0;font-family: Roboto,  'Times New Roman', Times, serif;border-left:1px solid #24303f;border-right:1px solid #24303f;border-bottom:1px solid #24303f;border-top:1px solid #24303f;margin:0 auto;min-width:248px;text-align:center;">
                <tr style="font-family:Georgia, 'Times New Roman', Times, serif;">
                  <td height="40" style="border-collapse: collapse;font-family: ColdLilies-Regular, Georgia, 'Times New Roman', Times, serif;"><table class="table-inner" border="0" align="center" cellpadding="0" cellspacing="0" style="border-spacing: 0;font-family: Roboto, Georgia, 'Times New Roman', Times, serif;">
                      <tr style="font-family:Georgia, 'Times New Roman', Times, serif;">
                        <td align="center" style="font-family:Georgia, 'Times New Roman', Times, serif;font-size:19px;color: #24303f;border-collapse: collapse;padding-left:35px;padding-right:35px;" class="variable-width-button-container">
<a href="#" style="color: #24303f;text-decoration: none;font-family: Georgia, 'Times New Roman', Times, serif;font-size:19px;font-weight:normal;padding-top:10px;padding-bottom:10px;text-transform:uppercase;text-align:center;" mc:edit="Centred Button" class="variable-button">
View&nbsp;More
</a>
</td>
                      </tr>
                    </table></td>
                </tr>
              </table>                  
              <!-- end button -->

As you can see I have used mc:edit="Centred Button" to make the button editable. I have also styled the link inline.

When I use the MailChimp interface and edit the button, editing text is fine and retains the style, but as soon as I change the link URL it becomes blue and underlined.

Even switching the editor to source code and inserting inline styles doesn't override the issue. MailChimp doesn't have a solution.

Answer 1

The problem is caused by MailChimp adding in another <a href=""> into an editable <a>

A possible solution is to use either a * {styles:here} or a a {}.

A better solution would be to put the mc:edit on the preceding <td> instead of on the <a> to avoid

<a href="#"><a href="#">Link Text </a></a>

According to the W3C specification you should not have an <a> inside an <a>. In HTML email using valid HTML is a very good idea as the email clients render things oddly at the best of times.

Originally I had put the edit on the <a> to retain my layout, but I don't think that is the best option any more. I used to use the following code:

CSS

.button a {
    styles
}

HTML

<table>
  <tr>
    <td class="button">
        <a>Link Text</a>
    </td>
  </tr>
</table>

Update MailChimp will inline the style when you send it, and it will work on Gmail etc.