Предварительный просмотр электронной почты HTML в Outlook (последняя версия) - PullRequest
Новая
       97

Предварительный просмотр электронной почты HTML в Outlook (последняя версия)

0 голосов
/ 03 апреля 2019

Я пытаюсь создать предварительный просмотр электронной почты в формате HTML.Предварительный просмотр электронной почты работает нормально в Gmail, Yahoo, Hotmail и Mobile View, но, к сожалению, он не работает в Outlook.Я пробовал несколько атрибутов, но все равно не получилось.Я прилагаю исходный вид и внешний вид с этим вопросом, а также делюсь своей работой здесь.пожалуйста, проверьте и направьте соответственно.Исходный адрес электронной почты ниже

enter image description here

, в то время как предварительный просмотр в перспективе выглядит примерно так

enter image description here enter image description here

Я прилагаю приведенный ниже код для помощи 

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width">
<title>Shirt Mailer</title>

<style type="text/css">
	
	@font-face {
		font-family: 'Helvetica Neue';
		src: url(http://www.biads.co.uk/uneek-emails/fonts/HelveticaNeue-Medium.ttf) format('truetype'),
			 url(http://www.biads.co.uk/uneek-emails/fonts/HelveticaNeue-Light.ttf) format('truetype');
		font-style: normal;
		font-weight: 400;
	}
	
	body {
		-moz-box-sizing: border-box;
		-ms-text-size-adjust: 100%;
		-webkit-box-sizing: border-box;
		-webkit-text-size-adjust: 100%;
		box-sizing: border-box;
		color: #000000;
		font-family: 'Helvetica Neue';
		font-size: 16px;
		font-weight: normal;
		line-height: 1;
		margin: 0;
		min-width: 100%;
		padding: 0;
		text-align: left;
		width: 100% !important;
	}
	
	table {
		width: 640px;
		margin: 0 auto 30px;
	}
	
	.logo {
		width: 250px;
		margin: 25px 0;
	}
	
	.nav td a {
		color: white;
		text-decoration: none;
		height: 36px;
		line-height: 36px;
	}
	
	.full-img {
		width: 100%;
		margin-top: 10px;
	}
	
	 .top-banner-img {
		width: 640px !important;
	} 
	
	.mb {
		margin-bottom: 15px;
	}
	
	.head3 {
		font-size: 17px;
	}
	
	.social-media {
		padding-left: 0px;
		margin-left: -10px;
	}
	
	.social-media li {
		list-style-type: none;
		display: inline-block;
	}
	
	.social-media li img {
		margin-left: 10px;
	}
	
	.wb-img {
		margin-left: 15px !important;
	}
	
	.unsub-link {
		color: black;
	}
	
</style>

</head>

<body>
	<table cellpadding="0" cellspacing="0">
		<tr align="center">
			<td colspan="7">
				<a href="http://www.uneekclothing.com/" target="_blank">
					<img src="http://www.biads.co.uk/uneek-emails/img/logo-black.png" alt="uneek logo" class="logo" />
				</a>
			</td>
		</tr>
		<tr bgcolor="#000000" class="nav" align="center">
			<td width="14.2%">
				<a href="https://www.uneekclothing.com/en-GB/catalogue__C7__Polos" target="_blank">Polos</a>
			</td>
			<td width="14.2%">
				<a href="https://www.uneekclothing.com/en-GB/catalogue__C5__Sweats" target="_blank">Sweats</a>
			</td>
			<td width="14.2%">
				<a href="https://www.uneekclothing.com/en-GB/catalogue__C8__T-Shirts" target="_blank">T-Shirts</a>
			</td>
			<td width="14.2%">
				<a href="https://www.uneekclothing.com/en-GB/catalogue__C3__Shirts" target="_blank">Shirts</a>
			</td>
			<td width="14.2%">
				<a href="https://www.uneekclothing.com/en-GB/catalogue__C2__Jackets" target="_blank">Jackets</a>
			</td>
			<td width="14.2%">
				<a href="https://www.uneekclothing.com/en-GB/catalogue__C1__Hi-Viz" target="_blank">Hi-Vis</a>
			</td>
			<td width="14.8%">
				<a href="https://www.uneekclothing.com/en-GB/catalogue__C6__Childrenswear" target="_blank">Childrens</a>
			</td>
		</tr>
		<tr>
			<td colspan="7">
				<a href="https://www.uneekclothing.com/en-GB/product__UC713__Men's_Tailored_Fit_Long_Sleeve_Poplin_Shirt?category=3" target="_blank">
					<img src="http://www.biads.co.uk/uneek-emails/img/top_banner.jpg" alt="uneek clothing" class="full-img top-banner-img" />
				</a>
			</td>
		</tr>
		<tr>
			<td colspan="3">
				<a href="https://www.uneekclothing.com/en-GB/product__UC714__Men's_Tailored_Fit_Short_Sleeve_Poplin_Shirt?category=11" target="_blank">
					<img src="http://www.biads.co.uk/uneek-emails/img/bottom_left.gif" alt="" class="full-img mb">
				</a>
			</td>
			<td></td>
			<td colspan="3">
				<a href="https://www.uneekclothing.com/en-GB/product__UC713__Men's_Tailored_Fit_Long_Sleeve_Poplin_Shirt?category=11" target="_blank">
					<img src="http://www.biads.co.uk/uneek-emails/img/bottom_right.gif" alt="" class="full-img mb">
				</a>
			</td>
		</tr>
		<tr align="center" bgcolor="#f6f6f6">
			<td colspan="4">
				<h3 class="head3">Follow Our Socials!</h3>
				<ul class="social-media">
					<li>
						<a href="https://www.facebook.com/uneekclothing.uk" target="_blank">
							<img src="http://www.biads.co.uk/uneek-emails/img/5.png" alt="" />
						</a>
					</li>
					<li>
						<a href="https://twitter.com/totallyuneek" target="_blank">
							<img src="http://www.biads.co.uk/uneek-emails/img/6.png" alt="" />
						</a>
					</li>
					<li>
						<a href="https://www.instagram.com/totallyuneek/" target="_blank">
							<img src="http://www.biads.co.uk/uneek-emails/img/7.png" alt="" />
						</a>
					</li>
					<li>
						<a href="https://www.youtube.com/channel/UC5XAHW8qF8KcQL_8FCKkxMA" target="_blank">
							<img src="http://www.biads.co.uk/uneek-emails/img/8.png" alt="" />
						</a>
					</li>
				</ul>
			</td>
			<td>
				<h3 class="head3">Website</h3>
				<ul class="social-media">
					<li>
						<a href="http://www.uneekclothing.com/" target="_blank">
							<img src="http://www.biads.co.uk/uneek-emails/img/9.png" alt="" class="wb-img" />
						</a>
					</li>
				</ul>
			</td>
			<td>
				<h3 class="head3">Brochure</h3>
				<ul class="social-media">
					<li>
						<a href="" target="_blank">
							<img src="http://www.biads.co.uk/uneek-emails/img/10.png" alt="" class="wb-img" />
						</a>
					</li>
				</ul>
			</td>
			<td></td>
		</tr>
		<tr align="center" bgcolor="#f6f6f6">
			<td colspan="7">
				<p>We have big things on the horizon, are you sure you don't want to hear about them?</p>
				<p>Unsubscribe <a href="*|UNSUB|*" class="unsub-link" target="_blank"><strong>here</strong></a>.</p>
			</td>
		</tr>
	</table>
</body>
</html>

Ответы [ 2 ]

1 голос
/ 03 апреля 2019

  • Outlook не будет работать с Helvetica Neue. Кажется, есть проблемы с именами шрифтов, которые имеют пробел в имени и не работают с большинством веб-шрифтов. Вам понадобится веб-безопасный резервный шрифт. Я мог бы предложить Trebuchet MS.

  • Outlook склонен игнорировать значения для изображений на листе <style>. Так что .full-img не окажет влияния на изображение. Добавьте значения ширины следующим образом: <img src="#" width="400" />

  • Если у вас есть несколько классов в элементе, Outlook может игнорировать все, кроме первого класса.

  • Outlook имеет пятнистую поддержку margin и padding.

  • Outlook игнорирует list-style-type

  • colspan принесет вам горе только в html-письмах.

Существует множество проблем с тем, как вы создали свою электронную почту. Например, используя li вместо td для горизонтального отображения.

Удачи.

0 голосов
/ 03 апреля 2019

Desktop Outlook использует движок рендеринга MS Word, поэтому он не будет читать ваши CSS-стили в «заголовке», поэтому вам также придется использовать встроенные стили.

Я бы также рекомендовал использовать '! - if (gte mso 9)', чтобы добавить дополнительный элемент для переноса в Outlook, чтобы исправить большинство проблем с макетом.

Взгляните на шаблон электронной почты ниже, он должен помочь вам в вашей проблеме. Вы должны быть в состоянии воссоздать свой шаблон вокруг этого.

Старайтесь, чтобы размер контейнера не превышал 680 пикселей, хотя в большинстве случаев это подходит для 600 пикселей. 

<!DOCTYPE html>
  <html>
    <head>
      <meta charset="utf-8"><!-- utf-8 works for most cases -->
      <meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- Forcing initial-scale shouldn't be necessary -->
      <meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- Use the latest (edge) version of IE rendering engine -->
      <meta name="x-apple-disable-message-reformatting"><!-- Disable auto-scale in iOS 10 Mail entirely -->
      <title></title>

      <style type="text/css">
        /* CLIENT-SPECIFIC STYLES */
        body, table, td, a { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
        table, td { mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
        img { -ms-interpolation-mode: bicubic; }

        /* RESET STYLES */
        img { border: 0; height: auto; line-height: 100%; outline: none; text-decoration: none; }
        table { border-collapse: collapse !important; }
        body { height: 100% !important; margin: 0 !important; padding: 0 !important; width: 100% !important; }

        /* iOS BLUE LINKS */
        a[x-apple-data-detectors] {
          color: inherit !important;
          text-decoration: none !important;
          font-size: inherit !important;
          font-family: inherit !important;
          font-weight: inherit !important;
          line-height: inherit !important;
        }

        /* MOBILE STYLES */
        @media screen and (max-width: 600px) {
          .img-max {
            width: 100% !important;
            max-width: 100% !important;
            height: auto !important;
          }

          .max-width { max-width: 100% !important; }

          .mobile-wrapper {
            width: 85% !important;
            max-width: 85% !important;
          }

          .mobile-padding {
            padding-left: 5% !important;
            padding-right: 5% !important;
          }
        }

        /* ANDROID CENTER FIX */
        div[style*="margin: 16px 0;"] { margin: 0 !important; }
      </style>
    </head>
    <body style="margin: 0 !important; padding: 0; !important background-color: #ffffff;" bgcolor="#ffffff">

      <!-- HIDDEN PREHEADER TEXT -->
      <div style="display: none; font-size: 1px; color: #fefefe; line-height: 1px; font-family: Open Sans, Helvetica, Arial, sans-serif; max-height: 0px; max-width: 0px; opacity: 0; overflow: hidden;">
        Lorem ipsum dolor que ist
      </div>

      <table border="0" cellpadding="0" cellspacing="0" width="100%">
        <tr>
          <td align="center" valign="top" width="100%" background="bg.jpg" bgcolor="#3b4a69" style="background: #3b4a69 url('bg.jpg'); background-size: cover; padding: 50px 15px 0 15px;" class="mobile-padding">
            <!--[if (gte mso 9)|(IE)]>
              <table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
                <tr>
                  <td align="center" valign="top" width="600">
            <![endif]-->
            <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:600px;">
              <tr>
                <td align="center" valign="top" style="padding: 0 0 20px 0;">
                  <img src="http://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/envelope-icon.png" width="50" height="50" border="0" style="display: block;">
                </td>
              </tr>
              <tr>
                <td align="center" valign="top" style="padding: 0; font-family: Open Sans, Helvetica, Arial, sans-serif;">
                  <h1 style="font-size: 40px; color: #ffffff;">Product Announcement</h1>
                  <p style="color: #b7bdc9; font-size: 20px; line-height: 28px; margin: 0;">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                  </p>
                </td>
              </tr>
              <tr>
                <td align="center" style="padding: 30px 0 0 0;">
                  <table border="0" cellspacing="0" cellpadding="0">
                    <tr>
                      <td align="center" style="border-radius: 28px;" bgcolor="#75b6c9">
                        <a href="https://codepen.io" target="_blank" style="font-size: 18px; font-family: Open Sans, Helvetica, Arial, sans-serif; color: #ffffff; text-decoration: none; border-radius: 28px; background-color: #75b6c9; padding: 16px 28px; border: 1px solid #75b6c9; display: block;">
                          Learn more &rarr;
                        </a>
                      </td>
                    </tr>
                  </table>
                </td>
              </tr>
              <tr>
                <td align="center" valign="top" style="padding: 50px 0 0 0;">
                  <img src="http://pluspng.com/img-png/mac-computer-screen-png-pin-screen-clipart-mac-computer-2-1024.png" width="600" height="268" border="0" alt="Insert alt text here" style="display: block; color: #ffffff; font-family: sans-serif; font-size: 24px;" class="img-max">
                </td>
              </tr>
            </table>
            <!--[if (gte mso 9)|(IE)]>
                  </td>
                </tr>
              </table>
            <![endif]-->
          </td>
        </tr>
        <tr>
          <td align="center" height="100%" valign="top" width="100%" style="padding: 0 15px;" class="mobile-padding">
            <!--[if (gte mso 9)|(IE)]>
              <table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
                <tr>
                  <td align="center" valign="top" width="600">
            <![endif]-->
            <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:600px;">
              <tr>
                <td align="center" valign="top">
                  <img src="https://imageog.flaticon.com/icons/png/512/178/178158.png?size=1200x630f&pad=10,10,10,10&ext=png&bg=FFFFFFFF" width="600" height="109" border="0" style="display: block;" class="img-max">
                </td>
              </tr>
              <tr>
                <td align="center" valign="top" style="padding: 50px 0 0 0; font-family: Open Sans, Helvetica, Arial, sans-serif;">
                  <h2 style="font-size: 28px; color: #444444;">Design emails people love</h2>
                  <p style="color: #999999; font-size: 18px; line-height: 28px; margin: 0;">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                  </p>
                </td>
              </tr>
            </table>
            <!--[if (gte mso 9)|(IE)]>
                  </td>
                </tr>
              </table>
            <![endif]-->
          </td>
        </tr>
        <tr>
          <td align="center" height="100%" valign="top" width="100%">
            <!--[if (gte mso 9)|(IE)]>
              <table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
                <tr>
                  <td align="center" valign="top" width="600">
            <![endif]-->
            <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:600px;">
              <tr>
                <td align="center" valign="top" style="font-size:0; padding-bottom: 25px; border-bottom: 2px solid #eeeeee;">
                  <!--[if (gte mso 9)|(IE)]>
                    <table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
                      <tr>
                        <td align="left" valign="top" width="280">
                  <![endif]-->
                  <div style="display:inline-block; max-width:50%; min-width:280px; vertical-align:top; width:100%;" class="mobile-wrapper">
                    <table align="left" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:280px;" class="max-width">
                      <tr>
                        <td align="left" valign="top" style="font-family: Open Sans, Helvetica, Arial, sans-serif; padding-top: 25px;">

                          <img src="http://icons.iconarchive.com/icons/graphicloads/100-flat-2/256/favourite-heart-icon.png" width="280" height="196" border="0" alt="Insert alt text here" style="display: block; border: 0px; color: #999999; font-family: sans-serif; font-size: 18px;" class="img-max">

                          <h3 style="font-size: 18px; line-height: 24px;">I &hearts; Email</h3>
                          <p style="color: #999999; font-size: 16px; line-height: 24px;">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                            <br><br>
                            <a href="https://codepen.io" target="_blank" style="text-decoration: none; color: #75b6c9;">
                              Read more &rarr;
                            </a>
                          </p>

                        </td>
                      </tr>
                    </table>
                  </div>
                  <!--[if (gte mso 9)|(IE)]>
                        </td>
                        <td width="20" style="font-size: 1px;">&nbsp;</td>
                        <td align="right" valign="top" width="280">
                  <![endif]-->
                  <div style="display:inline-block; max-width:50%; min-width:280px; vertical-align:top; width:100%;" class="mobile-wrapper">
                    <table align="left" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:280px; float: right;" class="max-width">
                      <tr>
                        <td align="left" valign="top" style="font-family: Open Sans, Helvetica, Arial, sans-serif; padding-top: 25px;">

                          <img src="http://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/envelope-icon.png" width="280" height="196" border="0" alt="Insert alt text here" style="display: block; border: 0px; color: #999999; font-family: sans-serif; font-size: 18px;" class="img-max">

                          <h3 style="font-size: 18px; line-height: 24px;">I &hearts; Email</h3>
                          <p style="color: #999999; font-size: 16px; line-height: 24px;">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                            <br><br>
                            <a href="https://codepen.io" target="_blank" style="text-decoration: none; color: #75b6c9;">Read more &rarr;</a>
                          </p>

                        </td>
                      </tr>
                    </table>
                  </div>
                  <!--[if (gte mso 9)|(IE)]>
                        </td>
                      </tr>
                    </table>
                  <![endif]-->
                </td>
              </tr>
            </table>
            <!--[if (gte mso 9)|(IE)]>
                  </td>
                </tr>
              </table>
            <![endif]-->
          </td>
        </tr>
        <tr>
          <td align="center" height="100%" valign="top" width="100%" style="padding: 25px 0 50px 0;">
            <!--[if (gte mso 9)|(IE)]>
              <table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
                <tr>
                  <td align="center" valign="top" width="600">
            <![endif]-->
            <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:600px;">
              <tr>
                <td align="center" valign="top" style="font-size:0;">
                  <!--[if (gte mso 9)|(IE)]>
                    <table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
                      <tr>
                        <td align="left" valign="top" width="190">
                  <![endif]-->
                  <div style="display:inline-block; max-width:33.3333%; min-width:190px; vertical-align:top; width:100%;" class="mobile-wrapper">

                    <table align="left" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:190px;" class="max-width">
                      <tr>
                        <td align="center" valign="top" style="font-family: Open Sans, Helvetica, Arial, sans-serif; padding-top: 25px;">

                          <img src="http://www.iconarchive.com/download/i98301/dakirby309/simply-styled/Gmail.ico" width="50" height="50" border="0" style="display: block;">

                          <h3 style="font-size: 18px; line-height: 24px;">Gmail</h3>
                          <p style="color: #999999; font-size: 14px; line-height: 20px;">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                            <br><br>
                            <a href="https://codepen.io" target="_blank" style="text-decoration: none; color: #75b6c9;">Read more &rarr;</a>
                          </p>

                        </td>
                      </tr>
                    </table>
                  </div>
                  <!--[if (gte mso 9)|(IE)]>
                        </td>
                        <td width="15" style="font-size: 1px;">&nbsp;</td>
                        <td align="left" valign="top" width="190">
                  <![endif]-->
                  <div style="display:inline-block; max-width:33.3333%; min-width:190px; vertical-align:top; width:100%;" class="mobile-wrapper">
                    <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:190px;" class="max-width">
                      <tr>
                        <td align="center" valign="top" style="font-family: Open Sans, Helvetica, Arial, sans-serif; padding-top: 25px;">

                          <img src="https://www.freeiconspng.com/uploads/outlook-icon-0.png" width="50" height="50" border="0" style="display: block;">

                          <h3 style="font-size: 18px; line-height: 24px;">Outlook</h3>
                          <p style="color: #999999; font-size: 14px; line-height: 20px;">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                            <br><br>
                            <a href="https://codepen.io" target="_blank" style="text-decoration: none; color: #75b6c9;">
                              Read more &rarr;
                            </a>
                          </p>

                        </td>
                      </tr>
                    </table>
                  </div>
                  <!--[if (gte mso 9)|(IE)]>
                        </td>
                        <td width="15" style="font-size: 1px;">&nbsp;</td>
                        <td align="left" valign="top" width="190">
                  <![endif]-->
                  <div style="display:inline-block; max-width:33.3333%; min-width:190px; vertical-align:top; width:100%;" class="mobile-wrapper">
                    <table align="right" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:190px; float: right;" class="max-width">
                      <tr>
                        <td align="center" valign="top" style="font-family: Open Sans, Helvetica, Arial, sans-serif; padding-top: 25px;">

                          <img src="https://www.freeiconspng.com/uploads/cricle-twitter-emblem-png-clipart-8.png" width="50" height="50" border="0" style="display: block;">

                          <h3 style="font-size: 18px; line-height: 24px;">Twitter</h3>
                          <p style="color: #999999; font-size: 14px; line-height: 20px;">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                            <br><br>
                            <a href="https://twitter.com" target="_blank" style="text-decoration: none; color: #75b6c9;">
                              Read more &rarr;
                            </a>
                          </p>

                        </td>
                      </tr>
                    </table>
                  </div>
                  <!--[if (gte mso 9)|(IE)]>
                        </td>
                      </tr>
                    </table>
                  <![endif]-->
                </td>
              </tr>
            </table>
            <!--[if (gte mso 9)|(IE)]>
                  </td>
                </tr>
              </table>
            <![endif]-->
          </td>
        </tr>
        <tr>
          <td align="center" height="100%" valign="top" width="100%" bgcolor="#f6f6f6" style="padding: 40px 15px;">
            <!--[if (gte mso 9)|(IE)]>
              <table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
                <tr>
                  <td align="center" valign="top" width="600">
            <![endif]-->
            <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:600px;">
              <tr>
                <td align="center" valign="top" style="padding: 0 0 5px 0;">
                  <img src="http://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/envelope-icon.png" width="35" height="35" border="0" style="display: block;">
                </td>
              </tr>
              <tr>
                <td align="center" valign="top" style="padding: 0; font-family: Open Sans, Helvetica, Arial, sans-serif; color: #999999;">
                  <p style="font-size: 14px; line-height: 20px;">
                    London<br>
                    United Kingdom
                    <br><br>
                    <a href="*|VIEW-ONLINE|*" style="color: #999999;" target="_blank">View Online</a>
                    &nbsp; &bull; &nbsp;
                    <a href="*|UNSUBSCRIBE|*" style="color: #999999;" target="_blank">Unsubscribe</a>
                  </p>
                </td>
              </tr>
            </table>
            <!--[if (gte mso 9)|(IE)]>
                  </td>
                </tr>
              </table>
            <![endif]-->
          </td>
        </tr>
      </table>
    </body>
  </html>
...