Making emails render properly in web version

[Anonymous]

I have built an email (re-written the code to make the email appear like a template from Campaign Monitor) with html code and tables. Everything works great except that when someone clicks the link to the web version of the email, suddenly the line spacing of the titles goes all wonky and extra whitespace appears between various elements of the file. How can I edit the web-version styling?

[Anonymous]

If I am not mistaken, I believe the web version just take the HTML from the email and puts it on a webpage.  If this is not correct, someone please chime in.  

Also, without seeing the HTML, it is hard to determine what is actually happening, since there are various ways browsers (and email clients) display the same HTML.

[Anonymous]

I second Kenny Buckles: the web version just takes the HTML from the email and renders it on a webpage.

While emails resource to tables and other elements to circumvent limitations or some systems, such as lack of background images support in MS-Outlook or supression of paragraphs in Yahoo, browsers often privilege divisions (div) and cascading style sheets (CSS).  

Campaign Monitor has good suggestions for portable content. It is important to keep in mind Marketo templates have the mktEditable tags, a non-existing feature in generic templates.

Extracts of the HTML source would be helpful indeed.

[Anonymous]

I'm not clear on what mktEditable tags are. Here is a snippet of code as well as a description of the problem in reference to the code:

<table border="0" width="643" height="809" align="center">
<tbody>
<tr>
<td></td>
<td><span style="font-weight: bold; font-size: 24px; color: #5e5d5d;"><a style="text-decoration: none;" href="http://www.safetyandhealthmagazine.com/articles/workers-don-t-have-to-be-alone-while-working-alone-2#video" target="_blank"><span style="font-size: 26px; color: #333333;">Free NSC Webinar: Workers don't have to be alone, while working alone</span></a><br /></span></td>

The anchor text (which is being used as a title for the article) looks good in the email. The line spacing is correct and the letters can be read easily. However, once viewed in web format, the lines become compressed and look ugly. I don't want to add a line-height snippet and have the lines split too far apart in the email itself.

There is also too much whitespace in the web version between the title and the image that comes below the title. In the email itself it looks good but the web version the gap is about 50% wider.

[Anonymous]

I wouldn't use a <br> tag in your html.  That might be one reason the spacing is so different.  I would use table's for spacing.  Try incorporating this HTML into yours:

<table border="0" width="643" align="center">

  <tbody>

    <tr>

      <td><span style="font-weight: bold; font-size: 24px; color: #5e5d5d;"><a style="text-decoration: none;" href="http://www.safetyandhealthmagazine.com/articles/workers-don-t-have-to-be-alone-while-working-alone-2#video" target="_blank"><span style="font-size: 26px; color: #333333;">Free NSC Webinar: Workers don't have to be alone, while working alone</span></a> </span></td>

    </tr>

    <tr>

      <td>&nbsp;</td>

    </tr>

    <tr>

      <td><img src="#" width="640" height="200px" border="0" /></td>

    </tr>

  </tbody>

</table>