CODEWITHSUNDEEP
cssoutlookpositionhtml-emailemail-client
Joshua
Joshua

Reputation: 61

Email Development - HTML

I rarely do Email HTML, however I am currently trying to make a sample email using HTML, CSS - the issue I have though, is that when I test it on Outlook online, "a's" are appearing everywhere and I aren't sure why? Any help is appreciated! Thanks!

enter image description here

  <style media="screen">

  </style>

</head>
<body bgcolor="#efe1b0">
<!-- Full container for page -->
  <table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#efe1b0">
    <tr>
      <td>
        <!-- Main email container -->
        <table class="container" width="640" align="center" cellspacing="0" cellpadding="0">

          <!-- Row 1 (Logo) -->
          <tr>
            <td valign="top" class="logo" bgcolor="#ffffff" style="padding: 10px 20px 0px 30px; border-left: 1px solid #dbc064; border-right: 1px solid #dbc064; border-top: 1px solid #dbc064;">
              <img style="margin-left: -10px;" src="images/large_logo.gif" alt="Our Vineyard" width="585" height="45" border="0">
            </td>
          </tr>

          <!-- Row 2 (Headline)-->
          <tr>
            <td valign="top" class="headline" bgcolor="#ffffff" style="padding: 15px 20px 5px 30px; border-left: 1px solid #dbc064; border-right: 1px solid #dbc064; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 22px;">
              <h1 style="margin: 0px 0px 15px 0px; font-weight: normal; font-size: 32px; color: #723c7f;">Main Heading Here</h1>
            </td>
          </tr>

          <!-- Row 3 (Image Banner) -->
          <tr>
            <td valign="top" bgcolor="#f5f2e5" class="banner" style="border-left: 1px solid #dbc064; border-right: 1px solid #dbc064;">
              <img src="images/banner_large.jpg" width="638" height="180" alt="Photo of Our Vineyard" />
            </td>
          </tr>

          <!-- Row 4 -->
          <tr>
            <td valign="top" bgcolor="#f5f2e5" class="content" style="padding: 30px 30px 10px 30px; border-left: 1px solid #dbc064; border-right: 1px solid #dbc064; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 22px; color: #654308;">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam commodo justo tellus, non fringilla dolor scelerisque vel. Nam hendrerit eros quis elementum gravida. Cras faucibus accumsan erat at pellentesque. Etiam a ultricies enim, eget lacinia sem. Integer et elit orci. Morbi ac mauris sapien. Suspendisse viverra pellentesque orci, imperdiet posuere erat aliquam eu.
              <br><br>Enjoy,<br>
              <img src="images/josh.gif" width="90" height="40" alt="Joshua" />
            </td>
          </tr>

          <!-- Row 5 -->
          <tr>
            <td>

            </td>
          </tr>

          <!-- Row 6 -->
          <tr>
            <td>

            </td>
          </tr>

          <!-- Row 7 -->
          <tr>
            <td>

            </td>
          </tr>
        </table>
      </td>
    </tr>
  </table>

</body>
</html>

Upvotes: 4

Views: 124

Answers (2)

Sambydev
Sambydev

Reputation: 31

Also, 1) Avoid using margins and paddings. Use td's to create vertical spacing. See below

<td width="20">&nbps;</td>

2) Use tr's to create horizontal spacing between sections.

<tr><td style="line-height: 10px; font-size: 10px;">&nbsp;</td></tr>

Upvotes: 0

David
David

Reputation: 369

To give reference to my comment, close up your table rows, IE: 

<tr>
        <td valign="top" class="logo" bgcolor="#ffffff" style="padding: 10px 20px 0px 30px; border-left: 1px solid #dbc064; border-right: 1px solid #dbc064; border-top: 1px solid #dbc064;">
          <img style="margin-left: -10px;" src="images/large_logo.gif" alt="Our Vineyard" width="585" height="45" border="0">
        </td>
      </tr><tr>
        <td valign="top" class="headline" bgcolor="#ffffff" style="padding: 15px 20px 5px 30px; border-left: 1px solid #dbc064; border-right: 1px solid #dbc064; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 22px;">
          <h1 style="margin: 0px 0px 15px 0px; font-weight: normal; font-size: 32px; color: #723c7f;">Main Heading Here</h1>
        </td>
      </tr><tr>
        <td valign="top" bgcolor="#f5f2e5" class="banner" style="border-left: 1px solid #dbc064; border-right: 1px solid #dbc064;">
          <img src="images/banner_large.jpg" width="638" height="180" alt="Photo of Our Vineyard" />
        </td>
      </tr>

Upvotes: 1

Related Questions