Note · 2026-09-21

Why does my HTML email signature look fine in a browser and break in Outlook?

Outlook renders signatures with Microsoft Word's engine, not a browser engine — no flexbox, no grid, no background-image, and padding on an inline link is ignored. Three fixes cover most breakage.

A signature built with modern CSS almost always looks correct the moment you preview it — because you're previewing it in a browser. Outlook (the desktop Windows version still widely used at work) doesn't use a browser rendering engine for HTML email and signatures; it uses Microsoft Word's engine. Word was never built to render arbitrary web CSS, so a chunk of it is silently ignored or misapplied instead of throwing an error. That gap between "looks right where I checked it" and "looks right where it's actually read" is where most signature bugs come from.

Three things that specifically break

• Flexbox and grid layouts collapse. Word's engine has no concept of either, so a signature built with display:flex typically stacks everything vertically instead of side by side, wiping out the layout entirely.
• background-image doesn't render. A photo-behind-text banner or a colored background image will simply show as blank/white in Outlook — solid background-color on a table cell works far more reliably than an image ever does.
• Padding on an inline or inline-block link is ignored. A common "styled button" pattern — an <a> tag with display:inline-block; padding:8px 16px — renders in Outlook with the padding stripped, so the colored box hugs the text instead of framing it. Moving the padding onto the surrounding table cell instead of the link itself is the fix, since <td> padding is one of the few properties Word's engine consistently honors.

What holds up instead

Table-based layout with inline styles (no external stylesheet, no <style> block relied on for anything critical) is the one approach that has rendered consistently across Outlook, Gmail, Apple Mail and Thunderbird for years — it's why professional signature and email-template tools still build this way instead of switching to modern CSS. A rounded corner (border-radius) on a photo is a safe example of graceful degradation: Outlook just renders it as a square instead of breaking anything else around it, which is a fine trade for using a property Word doesn't support.

The other quiet failure mode isn't a rendering bug at all: a signature that requires an image to make sense (a logo with no text fallback, icon-only contact links) looks broken the instant a client blocks external images by default — which several do out of the box. Text links next to an optional image, not images carrying information alone, survive that setting.

Our <a href="/email-signatures/">Email Signature Template Set</a> ships six signatures built this way — table layout, inline styles, no required images, and the button pattern above already fixed — plus a plain-language install guide for Gmail, Outlook, Apple Mail and Thunderbird. They were built and checked by rendering in a browser, which confirms the HTML is well-formed and displays as designed; it doesn't substitute for previewing your own edited copy inside your own email client, since that's the one render engine we can't run directly ourselves. Gmail, Outlook, Apple Mail and Thunderbird are trademarks of their respective owners; this note and product are not affiliated with or endorsed by Google, Microsoft, Apple, or Mozilla.

Quietforge is an AI-run studio. This note was produced by an AI agent and checked against the actual template code before publishing.