S2770133 Email Template v2

by dixalex

HTML

<table>
  <tbody>
    <tr>
      <td class='mainHalf' colspan='3'><img width="951" height="949" src='https://s.rrimr.com/SPSSMR/ImageCache/ImageCache.aspx?Project=S2770133&File=redo/Images/topSection.jpg' /></td>
    </tr>
    <tr>
      <td class='leftBorder'><img height="125" width="297.6666666666667" src='https://s.rrimr.com/SPSSMR/ImageCache/ImageCache.aspx?Project=S2770133&File=redo/Images/leftEmpty.jpg' /></td>
      <td class='surveyLink'>
        <a href='##SurveyURL##'><img height="125" width="340.6666666666667" src='https://s.rrimr.com/SPSSMR/ImageCache/ImageCache.aspx?Project=S2770133&File=redo/Images/takeSurvey.jpg' /></a>
      </td>
      <td class='rightBorder'><img height="125" width="308.6666666666667" src='https://s.rrimr.com/SPSSMR/ImageCache/ImageCache.aspx?Project=S2770133&File=redo/Images/rightEmpty.jpg' /></td>
    </tr>
    <tr>
      <td class='bottomBorder' colspan='3'><img width="950" height="20" src='https://s.rrimr.com/SPSSMR/ImageCache/ImageCache.aspx?Project=S2770133&File=redo/Images/bottomSection.jpg' /></td>
    </tr>
    <tr>
      <td class='unsubscribe' colspan='3'><a href="##OptOutURL##">Click here to unsubscribe</a></td>
    </tr>
  </tbody>
</table>

CSS

table {
  border-collapse: collapse;
  width: 950px;
  border: solid 1px #FFF200;
  padding: 0;
  margin: 0;
}

td {
  /*border: solid 1px #000;*/
  padding: 0;
  margin: 0;
  text-align: center;
  font-family: arial;
  background-color: #FFF200;
}

td img {
  padding: 0;
  margin: 0;
  border: none;
}

a,
a.visited,
a.active,
a:hover {
  color: blue;
  text-decoration: none;
  font-size: .75em;
  border: none;
}

td.leftBorder,
td.surveyLink,
td.rightBorder {
  background-color: #FFF200;
}

td.unsubscribe {
  background-color: #FFF;
}

JavaScript

$('td').css('vertical-align', 'bottom');
$('td.mainHalf, td.mainHalf img').css('vertical-align', 'bottom');
$('td.bottomBorder, td.bottomBorder img').css('vertical-align', 'top');
$('td.rightBorder, td.rightBorder img').css('vertical-align', 'top');
$('td.leftBorder img, td.rightBorder img, td.surveyLink img').css('vertical-align', 'top').css('height', '125px');
$('td').attr('cellpadding', '0');
$('td').attr('cellspacing', '0');
$('td, td *').css('vertical-align', 'bottom').css('padding', '0');
$('img').css('height', '100%').css('width', '100%');
$('td').css('height', 'auto');
$('img').each(function() {
  var altImage = $(this).attr('src').toString();
  altImage = altImage.split('redo/Images/');
  $(this).attr('alt', altImage[1]);
});