Outlook Email Broken Layout Fix: Resolve Outlook Button Border Collapsing for eCommerce Campaigns
In eCommerce email marketing, rendering issues directly tank conversion rates and cart recoveries. Product grids, checkout CTAs, and discount banners must display flawlessly to prevent purchase drop-offs. Below is the targeted integration guide to fix Outlook Button Border Collapsing inside Outlook 2019 templates when using HubSpot.
Technical Breakdown
Outlook 2019 uses the Microsoft Word (MSO) which lacks support for standard rendering rules. This causes Outlook Button Border Collapsing elements to break or collapse when rendering templates.
HubSpot Behaviors
HubSpot's COS template manager automatically wraps content blocks in dynamic div structures to support their drag-and-drop system. These extra wrappers force styling inheritances that override inline td paddings, leading to spacing collapses in Outlook. Setting explicit table element attributes is crucial. Double-check your dynamic product feed blocks. When injecting product loops from your catalog, ensure width sizes are explicitly handled to keep columns from overlapping.
Remediation Code Block
To guarantee perfectly rounded buttons inside Outlook, we must generate a hybrid VML (Vector Markup Language) roundrect structure overlaid with normal HTML tables. VML is read only by Outlook, while WebKit clients read the HTML layout. In your HubSpot campaign manager, make sure you configure your links to run via {{ unsubscribe_link }}.
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="{{ unsubscribe_link }}" style="height:44px;v-text-anchor:middle;width:200px;" arcsize="15%" stroke="f" fillcolor="#720e9e">
<w:anchorlock/>
<center style="color:#ffffff;font-family:sans-serif;font-size:13px;font-weight:bold;">Click Here</center>
</v:roundrect>
<![endif]-->
<!--[if !mso]><!-->
<table role="presentation" border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse;">
<tr><td align="center" bgcolor="#720e9e" style="border-radius:6px;"><a href="{{ unsubscribe_link }}" style="padding:12px 24px;color:#ffffff;display:inline-block;text-decoration:none;font-weight:bold;">Click Here</a></td></tr>
</table>
<!--<![endif]-->Live Code Sandbox Test
How to Deploy inside HubSpot
Copy the fixed VML or table wrapper code block from the remediation box above.
In HubSpot's Design Manager, edit the modules section. Create a 'Rich Text' or 'HTML' module block. Double-click the block, choose 'Tools' or 'Advanced', click 'Source Code', and drop the code snippet inside.