'Outlook: Links don't work at random in HTML Emails

I have a pretty simple unordered list with some links in an html email that generated by a server. It looks and works as expected in most email clients (gmail, apple mail, outlook web), but in Outlook desktop some of the links don't work, seemingly at random.

Specifically, some of the links (all from the same list) work, some don't. When they don't, they don't appear as links: they're not underlined and the cursor doesn't change when you mouse over them.

Here's the code:

<!doctype html>
<html>
  <head>
    <meta name="viewport" content="width=device-width">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>New Lead</title>
    <style>
@media only screen and (max-width: 620px) {
  table[class=body] h1 {
    font-size: 28px !important;
    margin-bottom: 10px !important;
  }
  table[class=body] h2 {
    margin-bottom: 5px !important;
  }

  table[class=body] p,
table[class=body] ul,
table[class=body] ol,
table[class=body] td,
table[class=body] span,
table[class=body] a {
    font-size: 16px !important;
  }

  table[class=body] .wrapper,
table[class=body] .article {
    padding: 10px !important;
  }

  table[class=body] .content {
    padding: 0 !important;
  }

  table[class=body] .container {
    padding: 0 !important;
    width: 100% !important;
  }

  table[class=body] .main {
    border-left-width: 0 !important;
    border-radius: 0 !important;
    border-right-width: 0 !important;
  }

  table[class=body] .btn table {
    width: 100% !important;
  }

  table[class=body] .btn a {
    width: 100% !important;
  }

  table[class=body] .img-responsive {
    height: auto !important;
    max-width: 100% !important;
    width: auto !important;
  }
}
@media all {

  .btn-primary table td:hover {
    background-color: #229422 !important;
  }

  .btn-primary a:hover {
    background-color: #229422 !important;
    border-color: #229422 !important;
  }
  .statusLinks a {
    color: #870a0a
  }
}
</style>
  </head>
  <body class="" style="background-color: #f6f6f6; font-family: sans-serif; -webkit-font-smoothing: antialiased; font-size: 14px; line-height: 1.4; margin: 0; padding: 0; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;">
    <span class="preheader" style="color: transparent; display: none; height: 0; max-height: 0; max-width: 0; opacity: 0; overflow: hidden; mso-hide: all; visibility: hidden; width: 0;">New lead from Bill Jones of Jason Test 20220511 B</span>
    <table role="presentation" border="0" cellpadding="0" cellspacing="0" class="body" style="margin-top: 20px; border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; background-color: #f6f6f6; width: 100%;" width="100%" bgcolor="#f6f6f6">
      <tr>
        <td style="font-family: sans-serif; font-size: 14px; vertical-align: top;" valign="top">&nbsp;</td>
        <td class="container" style="font-family: sans-serif; font-size: 14px; vertical-align: top; display: block; max-width: 580px; padding: 10px; width: 580px; margin: 0 auto;" width="580" valign="top">
          <div class="content" style="box-sizing: border-box; display: block; margin: 0 auto; max-width: 580px; padding: 10px;">

            <!-- START CENTERED WHITE CONTAINER -->
            <table role="presentation" class="main" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; background: #ffffff; border-radius: 3px; width: 100%;" width="100%">

              <!-- START MAIN CONTENT AREA -->
              <tr>
                <td class="wrapper" style="font-family: sans-serif; font-size: 14px; vertical-align: top; box-sizing: border-box; padding: 20px;" valign="top">
                  <table role="presentation" border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;" width="100%">
                    <tr>
                      <td style="font-family: sans-serif; font-size: 14px; vertical-align: top;" valign="top">
                        <img src="http://company.com/logo.png" alt="company logo" width="227" height="31" border="0" style="-ms-interpolation-mode: bicubic; max-width: 100%; padding-bottom: 2em; border: 0; outline: none; text-decoration: none; display: block;">
                        Hello,
<br/>
<br/>The following sales lead has been assigned to you based on the inquiry sender's location and needs.
<br/>
<br/>Please process the lead within 24 hours; contact the inquiry sender (when needed) and select the correct status or delegate the lead to someone else.  Options are listed in the bottom of this email.
<br/>
<br/>
<h2>Lead Details</h2>
<table align="left" role="presentation" cellspacing="0" cellpadding="0" border="0" style="display:block; width: 100% !important; margin-bottom: 20px"><tbody>
  <tr><td style="color: #888888; font-size: 12px;"> ID#:</td></tr>
  <tr><td style="padding-left: 10px;">218271</td></tr>
  <tr><td style="color: #888888; font-size: 12px; padding-top: 10px;"> Source:</td></tr>
  <tr><td style="padding-left: 10px;">Manually-added lead - Outbound Calls</td></tr>
  <tr><td style="color: #888888; font-size: 12px; padding-top: 10px;"> Status:</td></tr>
  <tr><td style="padding-left: 10px;">Awaiting Sales Action</td></tr>
  <tr><td style="color: #888888; font-size: 12px; padding-top: 10px;">Generated Date:</td></tr>
  <tr><td style="padding-left: 10px;">12 May 2022</td></tr>
  <tr><td style="color: #888888; font-size: 12px; padding-top: 10px;">Company:</td></tr>
  <tr><td style="padding-left: 10px;">Jason Test 20220511 B</td></tr>
    <tr><td style="color: #888888; font-size: 12px; padding-top: 10px;">Location:</td></tr>
    <tr>
      <td style="padding-left: 10px;">
        United States
      </td>
    </tr>
    <tr><td style="color: #888888; font-size: 12px; padding-top: 10px;">Contact:</td></tr>
    <tr><td style="padding-left: 10px;"><div><div style="margin: .3em 0"><span style="margin-right: .25em; border: 1px solid #ccc;padding:.25em">Bill</span> <span style="border: 1px solid #ccc;padding:.25em">Jones</span></div></div><div>[email protected]</div><div>Marketing Allowed: No</div></td></tr>
  <tr><td style="color: #888888; font-size: 12px; padding-top: 10px;">Interest:</td></tr>
  <tr><td style="padding-left: 10px;">Training</td></tr>
  <tr><td style="color: #888888; font-size: 12px; padding-top: 10px;">Customer Comment:</td></tr>
  <tr><td style="padding-left: 10px;">
    --
  </td></tr>
</tbody></table>

<table role="presentation" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; background: #F7ACAD; border-radius: 3px; width: 100%;" width="100%">
<tr>
  <td style="padding:10pt">
    <h2 style="margin-top:0">Update Lead Status</h2>
    <p>Please process this as soon as possible and select one of the options below.  For detailed information of the categories, please review your Sales Handbook.</p>
    <ul class="statusLinks">
        <li><a href="http://company.com/?m=l&t=HDKTto1N1whx3fyNF6LfvfrgYDBwyhvd&s=q">Qualify</a></li>
        <li><a href="http://company.com/?m=l&t=HDKTto1N1whx3fyNF6LfvfrgYDBwyhvd&s=22">Mark as Non-Sales Inquiry</a></li>
        <li><a href="http://company.com/?m=l&t=HDKTto1N1whx3fyNF6LfvfrgYDBwyhvd&s=17">Work-In-Progress</a></li>
        <li><a href="http://company.com/?m=l&t=HDKTto1N1whx3fyNF6LfvfrgYDBwyhvd&s=18">Mark as Disqualified</a></li>
        <li><a href="http://company.com/?m=l&t=HDKTto1N1whx3fyNF6LfvfrgYDBwyhvd&s=24">Mark as Junk / Solitication</a></li>
        <li><a href="http://company.com/?m=l&t=HDKTto1N1whx3fyNF6LfvfrgYDBwyhvd&s=19">Send to Dealer</a></li>
        <li><a href="http://company.com/?m=l&t=HDKTto1N1whx3fyNF6LfvfrgYDBwyhvd&s=20">Mark as Career / Media / PR / Sponsorship / Supplier Inquiry</a></li>
        <li><a href="http://company.com/?m=l&t=HDKTto1N1whx3fyNF6LfvfrgYDBwyhvd&s=d">Delegate to Someone Else</a></li>
    </ul>
  </td>
</tr>
</table>
                      </td>
                    </tr>
                  </table>
                    <hr style="clear: both; border: 0; border-bottom: 1px solid #cacaca; margin: 20px 0;">
                    <p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; margin-bottom: 15px;">Your feedback is always appreciated.</p>
                </td>
              </tr>

            <!-- END MAIN CONTENT AREA -->
            </table>
            <!-- END CENTERED WHITE CONTAINER -->

            <!-- START FOOTER -->
            <div class="footer" style="clear: both; margin-top: 10px; text-align: center; width: 100%;">
              <table role="presentation" border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;" width="100%">
                <tr>
                  <td class="content-block" style="font-family: sans-serif; vertical-align: top; padding-bottom: 10px; padding-top: 10px; color: #999999; font-size: 12px; text-align: center;" valign="top" align="center">
                    &copy;2022 <a href="http://company.com/product" style="text-decoration: underline; color: #999999; font-size: 12px; text-align: center;">product</a>, a product of <a href="http://company.com" style="text-decoration: underline; color: #999999; font-size: 12px; text-align: center;">Company</a>.
                  </td>
                </tr>
              </table>
            </div>
            <!-- END FOOTER -->

          </div>
        </td>
        <td style="font-family: sans-serif; font-size: 14px; vertical-align: top;" valign="top">&nbsp;</td>
      </tr>
    </table>
  </body>
</html>

Some relevant details:

  • The email uses the Cerberus html template.
  • There are no list specific styles in play outside of changing text color (no positioning or z-index stuff, etc.)
  • I can't replicate it myself at all; my user can't replicate it on demand either, but sees the problem routinely.
  • As far as I can tell the user is using the most up to date version of outlook desktop with no plugins.

Questions

  • Is anyone else seeing this problem?
  • Are there any obvious problems with my markup?
  • Are there any ways to lint/validate html emails for outlook standards?

Updates:

  • 20220513 Stabbing around in the dark, I noticed if you change the zoom in the separate message window some of the links no longer work. They still look like links, but the hover and click actions no longer work. This might be related.
  • 20220513 With some more messing around, when viewing the message in the separate, just scrolling up and down changes whether or not the links work. This has got to be some kind of outlook bug.
emailoutlookhtml-email


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions