Email newsletter rendering issues in Outlook 2010

Question

These are probably some silly questions/errors but I really go cross-eyed with html emails and I'm at the end of my tether, so I wondered if I could run this past you.

I'm having difficultly displaying an email I've created. The main offender is Outlook 2010, in which there are the following errors (I've labeled the text) -

"TITLE TEXT HERE" and "MORE HERE" are forced onto the line beneath the logo - "images/my_logo_1.jpg"

The top banner "images/img_row_1.jpg" should be the same width as the content and text beneath it, yet it is narrower.

The table containing "that one" is supposed to sit alongside the proceeding image and text but keeps getting forced onto 2 lines. I decreased the widths, but now it doesn't line up with the elements above and below it.

The table containing "this one" is forced onto a new line, also.

Also, the area enclosed in the following comments show up as 2 lines rather than the 1 that shows in any other email client/browser, eg

<!-- Start of seperator -->
<table width="100%" bgcolor="#ffffff" cellpadding="0" cellspacing="0" border="0" id="backgroundTable">
   <tbody>
      <tr>
         <td>
            <table width="600" align="center" cellspacing="0" cellpadding="0" border="0" class="devicewidth">
               <tbody>
                  <tr>
                     <td align="center" height="60" style="font-size:10px; line-height:1px;"><p style="background:none; border:solid 1px #d2d2d2; border-width:1px 0 0 0; height:1px; width:93%; margin:0px 0px 0px 0px; padding-top:10px;">&nbsp;</p></td>

                  </tr>
               </tbody>
            </table>
         </td>
      </tr>
   </tbody>
</table>
<!-- End of seperator -->

EDIT

Here's a link instead, with the full code.

Answer 1

Outlook adds a small buffer to the tables when sitting next to each other - that is what is pushing the last one below, as there is not enough room for it. The quick fix is to make the width of your tables a few pixels smaller.

The proper way to do it however is to place them within <td> 's instead.

Basic example:

<!-- You are doing this -->
<table width="600" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td>

      <table bgcolor="#777777" width="300" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td>
            table 1
          </td>
        </tr>
      </table>

      <table bgcolor="#999999" width="300" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td>
            table 2
          </td>
        </tr>
      </table>

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

<br><br>

<!-- Instead do this -->
<table width="600" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td>

      <!-- nest a full width table with 2 cells -->
      <table width="100%" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td width="300">

            <table bgcolor="#777777" width="100%" border="0" cellpadding="0" cellspacing="0">
              <tr>
                <td>
                  table 1
                </td>
              </tr>
            </table>

          </td>
          <td width="300">

            <table bgcolor="#999999" width="100%" border="0" cellpadding="0" cellspacing="0">
              <tr>
                <td>
                  table 2
                </td>
              </tr>
            </table>

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

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