0

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, e.g. 

<!-- 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.

mkultron
  • 303
  • 1
  • 2
  • 10

1 Answers1

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>
John
  • 11,985
  • 3
  • 45
  • 60
  • That's brilliant, thanks John. I'm still having difficulty with the 1px borders showing up as two separate lines in Outlook however, any tips/ideas? Thanks – mkultron Mar 28 '14 at 11:03
  • Not sure what you mean re: 2 separate lines for the borders. Maybe a screenshot will help. – John Mar 28 '14 at 13:30
  • Hi John, in my first post, the separator code to divide the content - it basically renders like a HR but made with borders, when in Outlook 2010 it renders with one horizontal line and then another line below it, rather than just one line. – mkultron Mar 28 '14 at 14:22
  • Try `
    ` or get rid of the `

    ` and put your border as `

    `. The issue might also be that you are using shorthand declarations for `border-width`. IMHO it is easier if you just accept that each table row/cell has a min height of 19px. Set your cell height to 20px and be done with it. I'm not a big fan of the `line-height:1px;` technique.     – John Mar 28 '14 at 14:58
  • That works perfectly, thanks so much! One more thing if I may - the email seems to appear fine now in different clients, but when I forward it, extra breaks seem to be added so it ends up a lot taller. Any idea why this is and why it would happen? Not a biggie, but wondered. Thank you for all of your help :) ! – mkultron Mar 31 '14 at 16:15
  • That is an Outlook thing. It converts your good html into MS Word html prior to forwarding. You'll find the gaps are around 20px between tables, but only a couple of px between table rows. You can also hide any unwanted lines by putting them into a parent with the same bgcolor. It is [unavoidable in Gmail](http://commadot.com/gmail-and-p-msonormal/), but you might be able to zero out the gaps in other clients by targeting `.MsoNormal` in the style tag (let me know if that works - I haven't tested it). – John Mar 31 '14 at 16:27
  • I see... I'll give it a shot and tell you if it works. Thanks again for all of your help, much appreciated! – mkultron Mar 31 '14 at 16:51