HTML Signature Cookbook

Your company logo or profile avatar looks fine in Gmail and Apple Mail, but in Outlook it renders at full native resolution — sometimes hundreds of pixels wide — and completely destroys the signature layout.

The root cause is that Outlook's Word rendering engine ignores CSS width and height properties set via style="" attributes or <style> blocks. If you write style="width: 80px", Outlook simply doesn't apply it.

Add explicit HTML attributes width and height directly on the <img> tag. These are not CSS — they are old-school HTML presentation attributes that the Word engine does understand. Also remove border-radius (Outlook ignores it) and add border="0" to prevent the default image border in some email clients.

<img
  src="https://example.com/avatar.jpg"
  alt="Sarah Mitchell"
  width="80"
  height="80"
  border="0"
  style="display: block; width: 80px; height: 80px;"
>
<!-- HTML width/height attrs enforce dimensions in Outlook -->

SigFix's AI Transpiler scans every <img> element in your signature. If it finds a CSS width value in the style attribute, it automatically copies that value into a HTML width attribute. It also adds height, sets border="0", and adds display: block to the inline style — all in under a millisecond.

The classic two-column signature layout — avatar on the left, name and contact details on the right — is trivial to build with display: flex. It looks perfect in every browser-based email client. In Outlook, it collapses into a single vertical column: image on top, text below.

Outlook's Word engine has zero support for CSS Flexbox or Grid. It doesn't matter if you use display: flex, display: grid, or align-items. All of it is silently discarded.

Replace the flex container with an HTML <table role="presentation">. Put the image in the first <td> with an explicit width attribute, and the text in the second. Use valign="middle" instead of align-items: center. Separate the columns with a thin divider cell if needed.

<!--[if mso]><table role="presentation" cellspacing="0" cellpadding="0"><tr><![endif]-->
<table role="presentation" cellspacing="0" cellpadding="0" border="0">
  <tr>
    <td width="88" valign="middle" style="padding-right: 16px;">
      <img src="avatar.jpg" width="80" height="80" border="0">
    </td>
    <td valign="middle">
      <p style="margin:0;font-weight:bold;">Sarah Mitchell</p>
      <p style="margin:4px 0 0;">Senior Account Executive</p>
    </td>
  </tr>
</table>

The AI Transpiler mode detects every element with display: flex in the input. For each flex container with a row direction (the default), it generates a <table role="presentation"> with one <td> per child element. It calculates proportional width values, maps gap into padding-right, and maps align-items: center into valign="middle". The original flex container is removed entirely.

AI code generators and modern HTML editors often produce clean, well-structured HTML with a <style> block at the top that defines all the classes used in the signature. This approach works perfectly in browsers. In Outlook, the entire <style> block is stripped before rendering.

The result: every element loses its styles. Fonts revert to the email's default. Colors disappear. Spacing collapses. The signature looks completely broken even though the HTML structure is technically correct.

Move every CSS rule from the <style> block directly into the style="" attribute of the matching HTML element. This is called CSS inlining. After inlining, the <style> tag can be removed entirely. The styles are now carried inside each element and cannot be stripped.

<!-- No <style> block — all styles are inlined -->
<div style="font-size:16px; font-weight:bold; color:#1a1a2e;">
  Sarah Mitchell
</div>
<div style="font-size:13px; color:#666;">
  Senior Account Executive
</div>

CSS inlining is the first transformation the AI Transpiler performs. It parses every rule in every <style> block, resolves which elements match each selector using the DOM, and merges the declarations directly into those elements' style attributes. Specificity is handled correctly — inline styles already on the element take priority. Once inlining is complete, all <style> tags are removed from the output.

Using margin: 0 auto together with max-width is the standard CSS approach for centering a block element. It is also one of the most reliably broken patterns in Outlook. The table or container simply ignores the centering and hugs the left edge of the email.

Outlook also misinterprets max-width — it either treats it as a fixed pixel width, collapses the element to zero, or simply ignores the property. Both CSS properties need to be replaced with Outlook-specific HTML attributes.

Replace margin: 0 auto with the HTML align="center" attribute on the table. Replace max-width with a fixed width attribute set to the desired pixel value. Remove max-width from the style attribute entirely.

<table
  width="520"
  align="center"
  border="0"
  cellpadding="0"
  cellspacing="0"
  style="border-collapse: collapse;"
>
  <!-- Centered and correctly sized in all Outlook versions -->
  <tr><td>...</td></tr>
</table>

The Outlook Cleaner mode targets this pattern directly. It scans all elements for margin: 0 auto or margin: auto in their inline styles and replaces it with align="center" on the element (or its closest table ancestor). It also removes max-width from inline styles and, where a numeric value is available, converts it to an HTML width attribute. Additional unsupported properties like box-shadow, border-radius, and text-shadow are stripped in the same pass.