Search code examples
htmlhtml-emailemail-templatesoutlook-web-app

Prevent Outlook (Web) Style Change on Street Address

I'm working with a basic HTML email template. At the end of the message, a street address is included.

When I open the email in Outlook web; it detects the address and re-styles it into a Bing map link.

Is there anyway to preserve the styles I set?

<p style="font-family: Garamond, 'Times New Roman', Times, serif;">
    123 E. Main St. SomeTown, USA 12345-6789
</p>
Solution

  • You can not disable links in a few email clients but there are walkarounds for these.

    1. You can use zero width non-joiner &zwnj;
    2. Use CSS to make it look like normal text
    3. User meta tags (for iOS)

    Gmail:

    Option 1:

    Wrap your telephone number or address in a span tag and use a global CSS to target it.

    .address{color:#000001; text-decoration:none;}
        <p style="font-family: Garamond, 'Times New Roman', Times, serif;">
        <span class="address">123 E. Main St. SomeTown, USA 12345-6789</span>
    </p>

    Reason is Gmail adds CSS that colors a href

    .ii a[href] { color: #15c; }

    You might be able to overwrite this with your CSS as well (give it a try).

    Option 2:

    You can use a CSS to overwrite all link styling, forcing it to inherit the style from the parent.

    u + #body a {
    color: inherit;
    text-decoration: none;
    font-size: inherit;
    font-family: inherit;
    font-weight: inherit;
    line-height: inherit;
}
    <body id="body">
</body>

    iOS:

    Option 1:

    Use meta tag to disable links

    <meta content="telephone=no" name="format-detection">

    Option 2:

    Use zero-width-non-joiner (&zwnj;)

    <p style="font-family: Garamond, 'Times New Roman', Times, serif;">
    1&zwnj;2&zwnj;3 E. Main St. SomeTown, USA 12345-6789
</p>

    Option 3:

    Styling the tel url scheme (also works for Android)

    a[href^=tel]{ color:#000; text-decoration:none;}

    Option 4:

    Styling mail's data detector selector

    a[x-apple-data-detectors] {
    color: inherit !important;
    text-decoration: none !important;
    font-size: inherit !important;
    font-family: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
}
    <p style="font-family: Garamond, 'Times New Roman', Times, serif;">
    123 E. Main St. SomeTown, USA 12345-6789
</p>

    Hope this helps in answering your question.