Search code examples
htmlemailoutlook-2003

Outlook 2003 and Font-Sizes


I have a html email which works correctly in every client except Outlook 2003, where the links have underlines (even with text-decoration: none;) and the font-size changes to be smaller.

Excerpt from code:

<td valign="top" align="left" style="line-height: 31px; font-size: 31px;">
                    <font face="Arial, Helvetica, sans-serif" size="3" color="#6b565d" style="line-height: 60px; font-size: 62px;"><strong>25% off</strong></font>
</td>

Sample Link:

<font face="Arial, Helvetica, sans-serif" size="3" color="#ffffff" style="line-height: 16px; font-size: 22px;"><a href="<squeeze.attribute.link.story01_text>" title="Book your sale room now" style="color: #ffffff; text-decoration: none; font-size:22px; background-color: #b50f18;"><font color="#ffffff"><strong>Mooo, I'm some text >></strong></font></a></font>

And this font-size changes to around 11 or 12px.

Any ideas?


Solution

  • Lot's of Markup in your code there. I just tried how Outlook 2010's markup looks when sending e-mail - because having links without underline works flawlessly when sending mails to Outlook 2003. Without further ado:

    <a href="http://example.org">
        <span style='text-decoration:none;'>My Link Text not underlined</span>
    </a>
    

    The important thing to note: It puts a span within the link for styling. No usage of <font> whatsoever.

    Outlook has the nice "feature" to autocomplete hyperlinks - AFAIK this is only for text you type, but it might be worth a shot, maybe the clients are autocompleting your links to be underlined? (Really just guessing). There is a hotfix to turn of autocompleting links here ( one still needs to fiddle in the registry and create a DWORD named DisableAutoUrlCompletion at HKEY_CURRENT_USER\Software\Microsoft\Office\11.0\Outlook\Preferences).

    Just for completeness here the full e-mail body of a really simple e-mail sent with Outlook 2010 showing flawlessly in Outlook 2003 (same font size, no underline - all the same). [Bear in mind - lot's of Microsoft "junk" in there which is not really needed, like Calibri styles even though Arial was used]

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o=
    "urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word"
    xmlns:m="http://schemas.microsoft.com/office/2004/12/omml" xmlns=
    "http://www.w3.org/1999/xhtml">
    <head>
      <meta name="Generator" content="Microsoft Word 14 (filtered medium)" />
      <style type="text/css">
    /*<![CDATA[*/
      <!--
      /* Font Definitions */
      @font-face
      {font-family:Calibri;
      panose-1:2 15 5 2 2 2 4 3 2 4;}
      /* Style Definitions */
      p.MsoNormal, li.MsoNormal, div.MsoNormal
      {margin:0cm;
      margin-bottom:.0001pt;
      font-size:11.0pt;
      font-family:"Calibri","sans-serif";}
      a:link, span.MsoHyperlink
      {mso-style-priority:99;
      color:blue;
      text-decoration:underline;}
      a:visited, span.MsoHyperlinkFollowed
      {mso-style-priority:99;
      color:purple;
      text-decoration:underline;}
      span.EmailStyle17
      {mso-style-type:personal-compose;
      font-family:"Calibri","sans-serif";
      color:windowtext;}
      .MsoChpDefault
      {mso-style-type:export-only;
      font-family:"Calibri","sans-serif";}
      @page WordSection1
      {size:612.0pt 792.0pt;
      margin:70.85pt 70.85pt 2.0cm 70.85pt;}
      div.WordSection1
      {page:WordSection1;}
      -->
      /*]]>*/
      </style><!--[if gte mso 9]><xml>
    <o:shapedefaults v:ext="edit" spidmax="1026" />
    </xml><![endif]--><!--[if gte mso 9]><xml>
    <o:shapelayout v:ext="edit">
    <o:idmap v:ext="edit" data="1" />
    </o:shapelayout></xml><![endif]-->
    
      <title></title>
    </head>
    
    <body lang="EN-US" link="blue" vlink="purple" xml:lang="EN-US">
      <div class="WordSection1">
        <p class="MsoNormal"><span lang="DE" style=
        'font-size:14.0pt;font-family:"Arial","sans-serif";color:black' xml:lang=
        "DE"><a href="http://example.org/"><span style=
        'color:black;text-decoration:none'>test</span></a></span></p>
      </div>
    </body>
    </html>