CODEWITHSUNDEEP
javascripthtmlcsshtml-email
Nate Harris
Nate Harris

Reputation: 3

Outlook Formatting Issues

I am currently attempting to get this email formatting properly in Outlook. I feel like I have looked everywhere online to get this formatted correctly in Outlook. The issue is that the whole entire body of the email is pushed all the way to the right of the window, but the footer stays centered. Ideally, the email and footer would be responsive and stay in the center of the viewport with some gray padding. I have tried conditional statements like so:

<! — [if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif] →

And some other attempts to no avail. Any input would be appreciated!

Here is my template I have been building off of, I feel like the issue might reside in the footer?

<!doctype html>
<html>
<head><meta name="viewport" content="width=device-width"><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Simple Transactional Email</title>
	<style type="text/css">/* -------------------------------------
        INLINED WITH htmlemail.io/inline
    ------------------------------------- */
    /* -------------------------------------
        RESPONSIVE AND MOBILE FRIENDLY STYLES
    ------------------------------------- */
    @media only screen and (max-width: 620px) {
      table[class=body] h1 {
        font-size: 28px !important;
        margin-bottom: 10px !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 td {
				border-collapse: collapse;
			}
      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;
      }
    }
    /* -------------------------------------
        PRESERVE THESE STYLES IN THE HEAD
    ------------------------------------- */
    @media all {
      .ExternalClass {
        width: 100%;
      }
      .ExternalClass,
            .ExternalClass p,
            .ExternalClass span,
            .ExternalClass font,
            .ExternalClass td,
            .ExternalClass div {
        line-height: 100%;
      }
      .apple-link a {
        color: inherit !important;
        font-family: inherit !important;
        font-size: inherit !important;
        font-weight: inherit !important;
        line-height: inherit !important;
        text-decoration: none !important;
      }
      .btn-primary table td:hover {
        background-color: #34495e !important;
      }
      .btn-primary a:hover {
        background-color: #34495e !important;
        border-color: #34495e !important;
      }
    }
	</style>
</head>
<body 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%;">
<table border="0" cellpadding="0" cellspacing="0" class="body" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%; background-color: #f6f6f6;">
	<tbody>
		<tr>
			<td style="font-family: sans-serif; font-size: 14px; vertical-align: top;"></td>
			<td class="container" style="font-family: sans-serif; font-size: 14px; vertical-align: top; display: block; Margin: 0 auto; max-width: 580px; padding: 10px; width: 580px;">
			<div class="content" style="box-sizing: border-box; display: block; Margin: 0 auto; max-width: 580px; padding: 10px;"><!-- START CENTERED WHITE CONTAINER --><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;">This is preheader text. Some clients will show this text as a preview.</span>
			<table class="main" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%; background: #ffffff; border-radius: 3px;"><!-- START MAIN CONTENT AREA -->
				<tbody>
					<tr>
						<td class="wrapper" style="font-family: sans-serif; font-size: 14px; vertical-align: top; box-sizing: border-box; padding: 20px;">
						<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;">
							<tbody>
								<tr>
									<td style="font-family: sans-serif; font-size: 14px; vertical-align: top;">
									<p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; Margin-bottom: 15px;">Hi,</p>

									<p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; Margin-bottom: 15px;">Lorem ipsum dolor sit amet, ex vis summo debitis constituto, quo in ullum aeterno veritus. Mutat eloquentiam no duo, ut labore apeirian ocurreret vel. His nobis insolens imperdiet eu, sumo illud nominavi ea vix. Eam an nostro saperet appellantur.</p>

									<p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; Margin-bottom: 15px;">Lorem ipsum dolor sit amet, ex vis summo debitis constituto, quo in ullum aeterno veritus. Mutat eloquentiam no duo, ut labore apeirian ocurreret vel. His nobis insolens imperdiet eu, sumo illud nominavi ea vix. Eam an nostro saperet appellantur:
                    <ol>
                      <li>Lorem ipsum dolor sit amet, ex vis summo debitis constituto, quo in ullum aeterno veritus.</li>
                      <li>Lorem ipsum dolor sit amet, ex vis summo debitis constituto, quo in ullum aeterno veritus.</li>
                      <li>Lorem ipsum dolor sit amet, ex vis summo debitis constituto, quo in ullum aeterno veritus..</li>
                    </ol>
                  </p>

									<p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; Margin-bottom: 15px;">Lorem ipsum dolor sit amet, ex vis summo debitis constituto, quo in ullum aeterno veritus.</p>

									<p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; Margin-bottom: 15px;">Lorem ipsum dolor sit amet, ex vis summo debitis constituto, quo in ullum aeterno veritus.</p>


                  <table style="font-family:sans-serif,arialcolor: #000000; font-size:12pt; margin-top:-10px">
                    <tbody>
                      <tr>
                        <td style="padding: 10px 10px 0 0;" valign="top"><img alt="Connie" nosend="1"   src="https://res.cloudinary.com/demo/image/upload/w_400,h_400,c_crop,g_face,r_max/w_200/lady.jpg" style="width: 100px; height: 100px;" /></td>
                        <td style="padding-right: 10px;" valign="top">
                          <p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; Margin-bottom: 15px;">
                            <br />Kate blahblah
                            <br /> Blah Blah Coordinator
                            <br /> Blah Blah
                            <br /> <a href="" rel="EMAIL">[email protected]</a>
                          </p>
                        </td>
                      </tr>
                    </tbody>
                 </table>
									</td>
								</tr>
							</tbody>
						</table>
						</td>
					</tr>
				</tbody>
			</table>
			</div>
			</td>
		</tr>
		<!-- END MAIN CONTENT AREA -->
	</tbody>
</table>
<!-- START FOOTER -->

<div class="footer" style="clear: both; Margin-top: 10px; text-align: center; width: 100%;">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;">
	<tbody>
		<tr>
			<td class="content-block" style="font-family: sans-serif; vertical-align: top; padding-bottom: 10px; padding-top: 10px; font-size: 12px; color: #999999; text-align: center;">blha blah blahblah<br />
			</td>
		</tr>
	</tbody>
</table>
</div>
</body>
</html>

Thanks

Upvotes: 0

Views: 67

Answers (1)

gwally
gwally

Reputation: 3547

Get rid of this line at line 93:

<td style="font-family: sans-serif; font-size: 14px; vertical-align: top;"></td>

You have an extra table cell that is pushing Outlook 2013-2016 over to the right.

Good luck.

Upvotes: 2

Related Questions