outlook 2007 - 2019 css issue for Email templates

432 Views Asked by At

I am setting up HTML template with 600 px as parent body width, but in outlook 2007 - 2019, full available width is being occupied.

Image is taking 100% of width in outlook versions but it should take only 600 px of width. For others, it is working fine.

Expected Image:enter image description here

Error Image: enter image description here

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>test</title>
    <link
      href="https://fonts.googleapis.com/css?family=Roboto:400,300,100,500,700,900"
      rel="stylesheet"
      type="text/css"
    />
    <style type="text/css">
      .main-wrapper .email_content p {
        padding-left: 10px;
      }
      img {
        max-width: 600px;
        outline: none;
        text-decoration: none;
        -ms-interpolation-mode: bicubic;
      }
      a img {
        border: none;
      }
      table {
        border-collapse: collapse !important;
      }
      #outlook a {
        padding: 0;
      }
      table td {
        border-collapse: collapse;
      }
    </style>
  </head>
  <body>
    <table align="center" width="100%" class="main-wrapper">
      <tr>
        <td style="background-color: #dddddd">
          <table
            cellpadding="0"
            cellspacing="0"
            border="0"
            width="100%"
            style="font-family: Roboto, Arial; font-size: 13px"
          >
            <tr bgcolor="#eeeeee">
              <td align="center">
                <table cellpadding="0" cellspacing="0" width="600" border="0">
                  <tr>
                    <!-- <td style="padding: 20px 20px 20px 20px;"> -->
                    <td style="padding: 20px 0px 20px 0px">
                      <table
                        cellspacing="0"
                        cellpadding="0"
                        border="0"
                        width="100%"
                        style="box-shadow: 0px 0px 4px 2px #e0e0e0"
                      >
                        <tr bgcolor="#ffffff">
                          <!-- <td style="padding: 25px; border: 1px solid #e2e2e2; color: #666666;"> -->
                          <td style="color: #666666; padding: 0">
                            <table
                              cellpadding="0"
                              cellspacing="0"
                              border="0"
                              width="100%"
                            >
                              <tr>
                                <td
                                  class="email_content"
                                  style="
                                    padding-bottom: 15px;
                                    background-color: #fafafa;
                                  "
                                >
                                  <div
                                    style="
                                      padding: 5px;
                                      border-radius: 4px 4px 0px 0px;
                                      background-color: #fdaf74;
                                    "
                                  ></div>
                                  <!-- <img src="https://res.cloudinary.com/dyyjph6kx/image/upload/f_auto/webui/eng/xoxoday-logo.svg" height="40"> -->
                                  <!-- <img src=https://xoxoday-dropbox-uat.s3.ap-southeast-1.amazonaws.com/image/clients/10178600000000000/platform_setting/First_American_Logo_0.jpg height="40"> -->
                                  <img style="padding : 20px 0 0 25px;"
                                  src=https://xoxoday-dropbox-uat.s3.ap-southeast-1.amazonaws.com/image/clients/10178600000000000/platform_setting/First_American_Logo_0.jpg
                                  height="40">
                                </td>
                              </tr>
                              <tr>
                                <table style="margin: 0 7px">
                                  <table
                                    align="center"
                                    width="100%"
                                    class="main-wrapper"
                                    style="border-bottom: 1px solid #eee"
                                  >
                                    <tr>
                                      <td>
                                        <table
                                          cellpadding="0"
                                          cellspacing="0"
                                          border="0"
                                          width="100%"
                                          style="font-family: Roboto, Arial"
                                        >
                                          <tr bgcolor="#F2F2F2">
                                            <td align="center">
                                              <table
                                                cellpadding="0"
                                                cellspacing="0"
                                                width="600"
                                                border="0"
                                              >
                                                <tr>
                                                  <td>
                                                    <table
                                                      cellspacing="0"
                                                      cellpadding="0"
                                                      border="0"
                                                      width="100%"
                                                    >
                                                      <tr bgcolor="#ffffff">
                                                        <td>
                                                          <table
                                                            cellpadding="0"
                                                            cellspacing="0"
                                                            border="0"
                                                            width="100%"
                                                          >
                                                            <tr>
                                                              <td
                                                                style="
                                                                  text-align: left;
                                                                  font-size: 16px;
                                                                  padding: 6px 0
                                                                    10px 18px;
                                                                "
                                                              >
                                                                <p
                                                                  style="
                                                                    color: #1a1a1a;
                                                                  "
                                                                >
                                                                  Hi Sheetal
                                                                  Chourasiya,
                                                                </p>
                                                                <p
                                                                  style="
                                                                    color: #505050;
                                                                  "
                                                                >
                                                                  You have
                                                                  received Plum
                                                                  E-Gift Card.
                                                                  Congratulations!
                                                                </p>
                                                              </td>
                                                            </tr>
                                                            <tr>
                                                              <td
                                                                align="center"
                                                              >
                                                                <img
                                                                  src="http://xoxoday-testing.s3.amazonaws.com/store/template/belatedBirthday/belated-happy-birthday-3.jpg"
                                                                  style="
                                                                    margin: 0;
                                                                    border: 0;
                                                                    padding: 0;
                                                                    display: block;
                                                                  "
                                                                  width="600px"
                                                                  height="300px"
                                                                  alt="Image"
                                                                />
                                                              </td>
                                                            </tr>

                                                            <tr>
                                                              <td
                                                                style="
                                                                  padding: 24px
                                                                    60px 0;
                                                                "
                                                              >
                                                                <table
                                                                  cellpadding="0"
                                                                  cellspacing="0"
                                                                  border="0"
                                                                  width="100%"
                                                                  style="
                                                                    text-align: left;
                                                                    font-size: 14px;
                                                                    background-color: #fafafa;
                                                                    border-radius: 6px;
                                                                    margin-bottom: 30px;
                                                                  "
                                                                >
                                                                  <tr>
                                                                    <th
                                                                      style="
                                                                        padding: 24px
                                                                          0 10px
                                                                          24px;
                                                                        text-align: left;
                                                                        font-size: 16px;
                                                                        color: #505050;
                                                                      "
                                                                    >
                                                                      Plum
                                                                      E-Gift
                                                                      Card
                                                                    </th>
                                                                    <td
                                                                      style="
                                                                        text-align: right;
                                                                        padding-right: 20x;
                                                                      "
                                                                    >
                                                                      <a
                                                                        href="https://docs.xoxoday.com/docs/getting-started-1"
                                                                        target="_blank"
                                                                        style="
                                                                          color: #c7417b;
                                                                          text-decoration: none;
                                                                          display: none;
                                                                        "
                                                                        >What is
                                                                        Plum?</a
                                                                      >
                                                                    </td>
                                                                  </tr>
                                                                  <tr
                                                                    style="
                                                                      box-shadow: 0px -1px
                                                                        0 0 #eaeaea;
                                                                    "
                                                                  >
                                                                    <td
                                                                      style="
                                                                        padding: 20px
                                                                          0 20px
                                                                          24px;
                                                                      "
                                                                    >
                                                                      <table
                                                                        cellpadding="0"
                                                                        cellspacing="0"
                                                                        border="0"
                                                                      >
                                                                        <tr>
                                                                          <td>
                                                                            <span
                                                                              style="
                                                                                color: #909090;
                                                                                font-size: 16px;
                                                                                margin: 0;
                                                                              "
                                                                              >Gift
                                                                              Card
                                                                              Code</span
                                                                            >
                                                                          </td>
                                                                        </tr>
                                                                        <tr>
                                                                          <td>
                                                                            <span
                                                                              style="
                                                                                color: #505050;
                                                                                font-size: 20px;
                                                                                margin: 6px
                                                                                  0
                                                                                  0
                                                                                  0;
                                                                                font-weight: 500;
                                                                                letter-spacing: 0.025rem;
                                                                              "
                                                                              >77m43dddb46b</span
                                                                            >
                                                                          </td>
                                                                        </tr>
                                                                      </table>
                                                                    </td>
                                                                  </tr>
                                                                </table>
                                                              </td>
                                                            </tr>
                                                          </table>
                                                        </td>
                                                      </tr>
                                                    </table>
                                                  </td>
                                                </tr>
                                              </table>
                                            </td>
                                          </tr>
                                        </table>
                                      </td>
                                    </tr>
                                  </table>
                                </table>
                              </tr>
                            </table>
                          </td>
                        </tr>
                      </table>
                    </td>
                  </tr>
                </table>
              </td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
  </body>
</html>

4

There are 4 best solutions below

1
AudioBubble On

Change this line:

<table align="center" style="width: 100%" class="main-wrapper">

To:

<table align="center" style="width: >100%" class="main-wrapper">

(>100% is a number smaller than 100, for example 90)

1
S H A S H A N K On

The initial width of a block-level element like div or p is auto.

Use [ width: auto ] to undo explicitly specified widths.

if you specify [ width:100% ], the element’s total width will be 100% of its containing block plus any horizontal margin, padding and border.

  • width: auto; will try as hard as possible to keep an element the same width as its parent container when additional space is added from margins, padding, or borders.

  • width: 100%; will make the element as wide as the parent container. Extra spacing will be added to the element's size without regard to the parent. This typically causes problems.

Check the image link below to get more information.

HTML Width - by Shashank

1
Aniketh Malyala On

The problem is in the following line:

    <table align="center" style="width: 100%" class="main-wrapper">

When you use style = "width: 100%", you are saying that you want the width of the table to be the entire browser width; the width of the parent container and the margins combined.

There are a few ways you can fix this problem:

The first way is to use width: auto:

    <table align="center" style="width: auto" class="main-wrapper">

Another way it to just set the pixels manually:

    <table align="center" style="width: 600px" class="main-wrapper">

Or, you can just get rid of the style as a whole so it'll auto fit to the parent width:

    <table align="center" class="main-wrapper">

All three of these methods will produce the same result.

0
Syfer On

You have px value on your image of the birthday code it seems. I have removed it and updated your code slightly through and online cleaner. I am a dreamweaver user and your code was not working for me. If the below code has issues, just change the width value of your birthday image (belated-happy-birthday-3.jpg) and assign width value without the pixels.

Try out this code to see if it works for you.

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=us-ascii">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>test</title>
  <link href="https://fonts.googleapis.com/css?family=Roboto:400,300,100,500,700,900" rel="stylesheet" type="text/css">
  <style type="text/css">
  .main-wrapper .email_content p {
        padding-left: 10px;
  }
  img {
        max-width: 600px;
        outline: none;
        text-decoration: none;
        -ms-interpolation-mode: bicubic;
  }
  a img {
        border: none;
  }
  table {
        border-collapse: collapse !important;
  }
  #outlook a {
        padding: 0;
  }
  table td {
        border-collapse: collapse;
  }
  </style>
</head>
<body>
  <table align="center" width="100%" class="main-wrapper">
    <tr>
      <td style="background-color: #dddddd">
        <table cellpadding="0" cellspacing="0" border="0" width="100%" style="font-family: Roboto, Arial; font-size: 13px">
          <tr bgcolor="#EEEEEE">
            <td align="center">
              <table cellpadding="0" cellspacing="0" width="600" border="0">
                <tr>
                  <!-- <td style="padding: 20px 20px 20px 20px;"> -->
                  <td style="padding: 20px 0px 20px 0px">
                    <table cellspacing="0" cellpadding="0" border="0" width="100%" style="box-shadow: 0px 0px 4px 2px #e0e0e0">
                      <tr bgcolor="#FFFFFF">
                        <!-- <td style="padding: 25px; border: 1px solid #e2e2e2; color: #666666;"> -->
                        <td style="color: #666666; padding: 0">
                          <table cellpadding="0" cellspacing="0" border="0" width="100%">
                            <tr>
                              <td class="email_content" style="padding-bottom: 15px; background-color: #fafafa;">
                                <div style="padding: 5px; border-radius: 4px 4px 0px 0px; background-color: #fdaf74;"></div><!-- <img src="https://res.cloudinary.com/dyyjph6kx/image/upload/f_auto/webui/eng/xoxoday-logo.svg" height="40"> --><!-- <img src=https://xoxoday-dropbox-uat.s3.ap-southeast-1.amazonaws.com/image/clients/10178600000000000/platform_setting/First_American_Logo_0.jpg height="40"> --><img src="https://xoxoday-dropbox-uat.s3.ap-southeast-1.amazonaws.com/image/clients/10178600000000000/platform_setting/First_American_Logo_0.jpg" alt="First_American_Logo_0" width="142" height="40" style="padding : 20px 0 0 25px;">
                              </td>
                            </tr>
                            <tr>
                              <td></td>
                            </tr>
                            <tr>
                              <td>
                                <table cellpadding="0" cellspacing="0" border="0" width="100%" style="font-family: Roboto, Arial">
                                  <tr bgcolor="#F2F2F2">
                                    <td align="center">
                                      <table cellpadding="0" cellspacing="0" width="600" border="0">
                                        <tr>
                                          <td>
                                            <table cellspacing="0" cellpadding="0" border="0" width="100%">
                                              <tr bgcolor="#FFFFFF">
                                                <td>
                                                  <table cellpadding="0" cellspacing="0" border="0" width="100%">
                                                    <tr>
                                                      <td style="text-align: left; font-size: 16px; padding: 6px 0 10px 18px;">
                                                        <p style="color: #1a1a1a;">Hi Sheetal Chourasiya,</p>
                                                        <p style="color: #505050;">You have received Plum E-Gift Card. Congratulations!</p>
                                                      </td>
                                                    </tr>
                                                    <tr>
                                                      <td align="center"><img src="http://xoxoday-testing.s3.amazonaws.com/store/template/belatedBirthday/belated-happy-birthday-3.jpg" style="margin: 0; border: 0; padding: 0; display: block;" width="600" height="300" alt="Image"></td>
                                                    </tr>
                                                    <tr>
                                                      <td style="padding: 24px 60px 0;">
                                                        <table cellpadding="0" cellspacing="0" border="0" width="100%" style="text-align: left; font-size: 14px; background-color: #fafafa; border-radius: 6px; margin-bottom: 30px;">
                                                          <tr>
                                                            <th style="padding: 24px 0 10px 24px; text-align: left; font-size: 16px; color: #505050;">Plum E-Gift Card</th>
                                                            <td style="text-align: right; padding-right: 20x;">
                                                              <a href="https://docs.xoxoday.com/docs/getting-started-1" target="_blank" style="color: #c7417b; text-decoration: none; display: none;">What is Plum?</a>
                                                            </td>
                                                          </tr>
                                                          <tr style="box-shadow: 0px -1px 0 0 #eaeaea;">
                                                            <td style="padding: 20px 0 20px 24px;">
                                                              <table cellpadding="0" cellspacing="0" border="0">
                                                                <tr>
                                                                  <td><span style="color: #909090; font-size: 16px; margin: 0;">Gift Card Code</span></td>
                                                                </tr>
                                                                <tr>
                                                                  <td><span style="color: #505050; font-size: 20px; margin: 6px 0 0 0; font-weight: 500; letter-spacing: 0.025rem;">77m43dddb46b</span></td>
                                                                </tr>
                                                              </table>
                                                            </td>
                                                          </tr>
                                                        </table>
                                                      </td>
                                                    </tr>
                                                  </table>
                                                </td>
                                              </tr>
                                            </table>
                                          </td>
                                        </tr>
                                      </table>
                                    </td>
                                  </tr>
                                </table>
                              </td>
                            </tr>
                          </table>
                        </td>
                      </tr>
                    </table>
                  </td>
                </tr>
              </table>
            </td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
</body>
</html>