I have an email that looks great everywhere we test except for Outlook. Bet you've never heard that before. :) One item I can't sort out is I have a <div> with a border. Inside is a header, title bar. Under that, an image in the top left corner of this box's content area. Then text that wraps around it filling the box. The image is loading in a table (only part of the box that is a table) for the purpose of being able to put "padding" around it. The image has white spacing on the left and right of it that I can't get rid of to save my life and it overlaps the border to the left and also somehow affects the border far to the right. It also has some overlap on the right side covering some of the text that is wrapping around it. Interesting point is that if I remove the table's "align=left" parameter so the text moves under the image (no wrapping), then it moves a bit to the right and off of the left side border. So, wrapping causes the border overlap. The align left must remain, so need to figure out why the wrap pushes the image table to the left and/or how to get rid of that white space on the sides of the image table. I'm going insane.

image

We take the code from our website, run it through an inliner, then use it in an email. So I know the code could be simplified a bit, but this is what it is. I've tried stripping out just about everything and nothing seems to matter. Any advice would be great!

<div id="zone_379" style="margin-bottom:10px; width: 300px;">
      <div class="zone-general-div clearfix" style="display:block;padding:4px 4px 4px 4px;margin:4px 0px 4px 0px;border-radius:5px;border:1px solid #C4C4C4;">
        <div class="zone-heading" style="font-size:18px;font-family:Arial;font-weight:500;color:#800000;line-height:24px;background-color:#DBDBDB;text-align:left;text-transform:capitalize;padding:4px 4px 4px 4px;margin:0px 0px 0px 0px;">Feature Article - TechTip</div>
          <div style="margin:0;padding:0;border:0;clear:both;"></div>
            <div class="zone-articles-container" style="padding:5px;display:block;">
              <div id="page_1_379">
                <div class=" row-fluid" style="display:inline-flex;">
                  <div class="zone_item p_subcell span12" style="border-bottom:1px solid rgba(0, 0, 0, 0.2);display:block;margin-bottom:12px;min-height:1em;padding-top:10px;">
                    <table class="ijp_image_box" align="left" cellpadding="0" cellspacing="0" width="110" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
                      <tr>
                        <td style="mso-table-lspace:0pt;mso-table-rspace:0pt;">
                          <img class="zone-article-image" align="left" src="http://oursite.com/images/thumb_379.jpg" /></td>
                        <td style="mso-table-lspace:0pt;mso-table-rspace:0pt;" width="5">&nbsp;</td>
                      </tr>
                    </table>
                    <h4 class="zone-article-title" style="font-size:18px;font-family:Arial;font-weight:400;color:#145077;line-height:20px;">
                      <a href="http://www.oursite.com" style="text-decoration:none;font-size:18px;font-family:Arial;font-weight:400;color:#145077;line-height:20px;">ARTICLE TITLE</a>
                    </h4>
                    <p style="margin:0;padding:0;border:0;">
                      <span style="margin:0;padding:0;border:0;font-size: 10pt; font-family: 'Arial',sans-serif; color: #800000;">
                        <strong style="margin:0;padding:0;border:0;">Article Subtitle</strong>
                      </span>
                    </p>
                    <p style="margin:0;padding:0;border:0;">
                      <span style="margin:0;padding:0;border:0;font-size: 10pt; font-family: 'Arial',sans-serif;">Written by Author &nbsp;</span>
                    </p>
                    <p style="margin:0;padding:0;border:0;">
                      <span style="margin:0;padding:0;border:0;font-size: 10pt; font-family: 'Arial',sans-serif;">Article Text Content.</span>
                    </p>
                    <div style="margin:0;padding:0;border:0;clear:both;"></div>
                    <div class="zone-article-readmore" style="margin:0;padding:0;border:0;">Read More »</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>