CODEWITHSUNDEEP
htmloutlookhtml-email
Sal B
Sal B

Reputation: 540

Outlook 2013 Table Expanding

Coding an email and the rendering is fine on all other versions of Outlook save for 2013. When testing via litmus and actual Outlook2013, the table with the Japanese content / image expands. It's a pretty straight forward HTML table. See anything that I've missed?

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv='Content-Type' content='text/html; charset=UTF-8'>
</head>
<body>

<table align="center" border="0" cellpadding="0" cellspacing="0" style="width: 600px">
  <tr>
    <td colspan="3">
      <img src="http://images.ic.maximintegrated.com/EloquaImages/clients/MaximIntegratedProductsInc/%7Beb6785c3-c02f-40db-b10c-0a175e2820d5%7D_Re-engagement_header_2.jpg">
    </td>
  </tr>
  <tr>
    <td width="20">&nbsp;</td>
    <td width="560" style="padding-top:30px;">
      <table width="560" cellpadding="0" cellspacing="0" border="0">
        <tr>
          <td style="font-family:Arial, Helvetica,sans-serif;font-size:24px;color:#6E2585;font-weight:bold;font-height:27px;padding-bottom:30px;">
            ワイヤレススピーカーが当たる耳よりな情報です
          </td>
        </tr>
        <tr>
          <td style="padding-bottom:30px;">
            <table width="560" cellpadding="0" cellspacing="0" border="0">
              <tr>
                <td style="font-family:Arial, Helvetica, sans-serif;font-size:12px;color:#000000" height="110" valign="top" width="362">
                  <b>
                    <font style="font-size:16px;">お客様のMyMaximアカウントを更新して、60ドル相当のRoxBoxスピーカーが当たるキャンペーンに応募する</font></b>
                  <br>
                  <br>
                  MyMaximの会員特典は以前よりさらに良くなり、今、お客様情報を更新するだけで、マキシムの抽選に自動的に応募することができます。EE-Simツールを使って<b>カスタムの回路設計を数分で作成し</b>、1つのプロファイルで<b>技術サポートをいち早く受けることができます</b>。さらに、カスタマイズ可能なパネルを使って<b>１カ所ですべての情報を見つけることができます</b>。</td>

                <td width="198" style="text-align:center;" align="center">
                  <center>
                    <img src="http://images.ic.maximintegrated.com/EloquaImages/clients/MaximIntegratedProductsInc/{dbe437de-2c33-4a04-a64c-59741cb0622f}_Wireless-Speaker.gif" style="display:block;" width="190">
                  </center>
                </td>
              </tr>
            </table>
          </td>
        </tr>
        <tr>
          <td>
            <div>
              <!--[if gte mso 9]>
                <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://ic.maximintegrated.com/FY16_Q1_2015_SEP_ReEngagement_LP_Japanese_MC?utm_source=eloqua&utm_medium=email&utm_content=Enter_Now&utm_campaign=FY16_Q1_2015_SEP_ReEngagement_Japanese_MC
                " style="height:40px;v-text-anchor:middle;width:200px;" arcsize="12%" stroke="f" fillcolor="#6e2585">
                <w:anchorlock/>
                  <center>
              <![endif]-->
                <a href="http://ic.maximintegrated.com/FY16_Q1_2015_SEP_ReEngagement_LP_Japanese_MC?utm_campaign=H1%20Thank%20You%201%20-%20MC%20-%20JW%20Test&utm_medium=email&utm_source=Eloqua&utm_source=eloqua&amp;utm_medium=email&amp;utm_content=Enter_Now&amp;utm_campaign=FY16_Q1_2015_SEP_ReEngagement_Japanese_MC
        &elq=e734b2e1380b458c974801d66f3f0f90&elqCampaignId=&elqaid=508&elqat=1&elqTrackId=0e27b1ed2bf440979ad85531ba29d364" style="background-color:#6e2585;border-radius:4px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:16px;font-weight:bold;line-height:40px;text-align:center;text-decoration:none;width:200px;-webkit-text-size-adjust:none;">今すぐ応募する &gt;</a>
              <!--[if mso]>
              </center>
              </v:roundrect>
              <![endif]-->
            </div>
          </td>
        </tr>
      </table>
    </td>
    <td width="20">&nbsp;</td>
  </tr>
</table>
</body>
</html>

Upvotes: 0

Views: 213

Answers (1)

Gortonington
Gortonington

Reputation: 3587

If I add "word-break:break-all" CSS to it, it works. I think the issue is just that MSO did not recognize a place to break the string, so it flowed out and stretched the table. No idea why this only happened in 2013 nor anything really on this. But by testing, this worked via EmailonAcid and on live tests I sent to myself. Below is code I used:

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv='Content-Type' content='text/html; charset=UTF-8'>
</head>
<body>

<table align="center" border="0" cellpadding="0" cellspacing="0" style="width: 600px">
  <tr>
    <td colspan="3">
      <img src="http://images.ic.maximintegrated.com/EloquaImages/clients/MaximIntegratedProductsInc/%7Beb6785c3-c02f-40db-b10c-0a175e2820d5%7D_Re-engagement_header_2.jpg">
    </td>
  </tr>
  <tr>
    <td width="20">&nbsp;</td>
    <td width="560" style="padding-top:30px;">
      <table width="560" cellpadding="0" cellspacing="0" border="0">
        <tr>
          <td style="font-family:Arial, Helvetica,sans-serif;font-size:24px;color:#6E2585;font-weight:bold;font-height:27px;padding-bottom:30px;">
            ワイヤレススピーカーが当たる耳よりな情報です
          </td>
        </tr>
        <tr>
          <td style="padding-bottom:30px;">
            <table width="560" cellpadding="0" cellspacing="0" border="0">
              <tr>
                <td style="font-family:Arial, Helvetica, sans-serif;font-size:12px;color:#000000; word-break:break-all;" height="110" valign="top" width="362">
                  <b>
                    <font style="font-size:16px; word-break:break-all;">お客様のMyMaximアカウントを更新して、60ドル相当のRoxBoxスピーカーが当たるキャンペーンに応募する</font></b>
                  <br>
                  <br>
                  MyMaximの会員特典は以前よりさらに良くなり、今、お客様情報を更新するだけで、マキシムの抽選に自動的に応募することができます。EE-Simツールを使って<b>カスタムの回路設計を数分で作成し</b>、1つのプロファイルで<b>技術サポートをいち早く受けることができます</b>。さらに、カスタマイズ可能なパネルを使って<b>１カ所ですべての情報を見つけることができます</b>。</td>

                <td width="198" style="text-align:center;" align="center">
                  <center>
                    <img src="http://images.ic.maximintegrated.com/EloquaImages/clients/MaximIntegratedProductsInc/{dbe437de-2c33-4a04-a64c-59741cb0622f}_Wireless-Speaker.gif" style="display:block;" width="190">
                  </center>
                </td>
              </tr>
            </table>
          </td>
        </tr>
        <tr>
          <td>
            <div>
              <!--[if gte mso 9]>
                <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://ic.maximintegrated.com/FY16_Q1_2015_SEP_ReEngagement_LP_Japanese_MC?utm_source=eloqua&utm_medium=email&utm_content=Enter_Now&utm_campaign=FY16_Q1_2015_SEP_ReEngagement_Japanese_MC
                " style="height:40px;v-text-anchor:middle;width:200px;" arcsize="12%" stroke="f" fillcolor="#6e2585">
                <w:anchorlock/>
                  <center>
              <![endif]-->
                <a href="http://ic.maximintegrated.com/FY16_Q1_2015_SEP_ReEngagement_LP_Japanese_MC?utm_campaign=H1%20Thank%20You%201%20-%20MC%20-%20JW%20Test&utm_medium=email&utm_source=Eloqua&utm_source=eloqua&amp;utm_medium=email&amp;utm_content=Enter_Now&amp;utm_campaign=FY16_Q1_2015_SEP_ReEngagement_Japanese_MC
        &elq=e734b2e1380b458c974801d66f3f0f90&elqCampaignId=&elqaid=508&elqat=1&elqTrackId=0e27b1ed2bf440979ad85531ba29d364" style="background-color:#6e2585;border-radius:4px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:16px;font-weight:bold;line-height:40px;text-align:center;text-decoration:none;width:200px;-webkit-text-size-adjust:none;">今すぐ応募する &gt;</a>
              <!--[if mso]>
              </center>
              </v:roundrect>
              <![endif]-->
            </div>
          </td>
        </tr>
      </table>
    </td>
    <td width="20">&nbsp;</td>
  </tr>
</table>
</body>
</html>

Upvotes: 1

Related Questions