Home/ Questions/Q 8982849
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T20:40:56+00:00

I have following html as my template for the email generated. When I open

  • 0

I have following html as my template for the email generated. When I open the template in IE, Chrome all works fine and looks as expected.

<html>
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <style>
        .wrap{
        border:2px solid #CCC;
        background:#FFF;
        width:600px;
        }
        .wrap2{
        border:2px solid #CCC;
        background:#CCC;
        }
      </style>
    </head>
    <div class="wrap" width="600">
      <!--<h3>Email Alert</h3>-->
      <table>
        <tr>
          <td>
            <font color="#999999">
              <strong>Start Time  </strong>
            </font>
          </td>
          <td> : 1212 12 12 12</td>
        </tr>
        <tr>
          <td>
            <font color="#999999">End Time  </font>
          </td>
          <td align="left"> : 1212 12 12 12</td>
        </tr>
        <tr>
          <td>
            <font color="#999999">Location  </font>
          </td>
          <td align="left"> : Sri Lanka</td>
        </tr>
        <tr>
          <td>
            <font color="#999999">Description  </font>
          </td>
          <td align="left"> : blah blaah blah</td>
        </tr>
      </table>

      <div class="wrap2">
        <small>This email alert is automatically generated for the appointment created </small>
        <br/>
        <small>You are receiving this email because you set a reminder for this appointment on the calendar .</small>
      </div>
    </div>

    <body>
    </body>
</html>

But when I send it to email as template, Outlook renders it in peculiar way. Please find the image below. It doesn’t work with fixed 600px width I gave. It stretches as I resize the email window in Outlook 2007.

enter image description here

Can someone please tell me the issue?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Try this:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<html>
<head>
    <title></title>
    <style>
        .wrap {
            border: 2px solid #CCC;
            background-color: #FFF;
            width: 600px;
        }

        .wrap2 {
            border: 2px solid #CCC;
            background-color: #CCC;
        }

        .fontFormat {
            color: #999999;
        }
    </style>
</head>
<body>
    <!--<h3>Email Alert</h3>-->
    <table class="wrap">
        <tr>
            <td>
                <span class="fontFormat">
                    <strong>Start Time  </strong>
                </span>
            </td>
            <td>: 1212 12 12 12</td>
        </tr>
        <tr>
            <td>
                <span class="fontFormat">End Time  </span>
            </td>
            <td style="text-align: left;">: 1212 12 12 12</td>
        </tr>
        <tr>
            <td>
                <span class="fontFormat">Location  </span>
            </td>
            <td style="text-align: left;">: Sri Lanka</td>
        </tr>
        <tr>
            <td>
                <span class="fontFormat">Description  </span>
            </td>
            <td style="text-align: left;">: blah blaah blah</td>
        </tr>
        <tr>
            <td class="wrap2" colspan="2">
                <small>This email alert is automatically generated for the appointment created </small>
                <br />
                <small>You are receiving this email because you set a reminder for this appointment on the calendar </small>

            </td>
        </tr>
    </table>
</body>
</html>
    • 0