I have been working on this html for a while trying to figure out why outlook 2010 is adding this 1px white line between images that are hyperlinked.
I am pretty sure I have tried all the tricks I have read about Html emails and outlook. Below is the code/styling I am using for just 2 tables. They have 1 single image in each. If I remove the hyperlink, there is no space in outlook 2010. If I leave the hyperlink I can't find a way to get rid of the space!
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse;" width="600">
<tr>
<td style="border-collapse: collapse;" width="600" height="179" >
<img border="0" align="left" alt="Gold Rush" height="179" src="https://d2q0qd5iz04n9u.cloudfront.net/_ssl/proxy.php/http/gallery.mailchimp.com/5513172da1aa95c4b84fdedba/images/ESSETIAL6_FALL_01.jpg" style="height: 179px; width: 600px; margin: 0px; padding: 0px; display:block; float: left; border:0; vertical-align:bottom;" width="600" />
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse;" width="600">
<tr>
<td style="border-collapse: collapse;" width="600" height="25">
<img align="left" border="0" alt="Shop Gold" height="25" src="https://d2q0qd5iz04n9u.cloudfront.net/_ssl/proxy.php/http/gallery.mailchimp.com/5513172da1aa95c4b84fdedba/images/ESSETIAL6_FALL_02.1.jpg" style="height: 25px; width: 600px; margin: 0px; padding: 0px; display:block; float: left; border:0; vertical-align:bottom;" width="600" />
</td>
</tr>
</table>
Any and all ideas are welcome please!
Just a question of order with attributes, it seems... Try like this, it's ok for me! ;)
<table border="0" cellpadding="0" cellspacing="0" width="600">
<tr>
<td><img style="display:block;" src="https://d2q0qd5iz04n9u.cloudfront.net/_ssl/proxy.php/http/gallery.mailchimp.com/5513172da1aa95c4b84fdedba/images/ESSETIAL6_FALL_01.jpg" height="179" width="600" alt="Gold Rush" border="0" /></td>
</tr>
<tr>
<td><img border="0" alt="Shop Gold" height="25" src="https://d2q0qd5iz04n9u.cloudfront.net/_ssl/proxy.php/http/gallery.mailchimp.com/5513172da1aa95c4b84fdedba/images/ESSETIAL6_FALL_02.1.jpg" style="display:block;" width="600" /></td>
</tr>
</table>
try removing the width='600px' from the <td>, so that it would take the width of the img
Related
I am attempting to include two images as a header in an e-mail, using pure HTML. One image will cover 40% of the screen width, and the other 60% width (the height for both is just auto). However, the max width for both images combined is 750px, so on large desktop devices, the combined width doesn't stretch further than that.
I learned of a trick involving setting td's to a width of 0 before and after the primary content, which works well for text, but not so well for my images. Here's my code right now:
<table width="750" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="0"></td>
<td width="40%" valign="middle"><img src="myimg.png" alt="Text" style="margin: 0; border: 0; padding: 0; display: block; width: 40%;" /></td>
<td width="60%" valign="middle"><img src="myimg.png" alt="Text" style="margin: 0; border: 0; padding: 0; display: block; width: 60%;" /></td>
<td width="0"></td>
</tr>
</table>
And here is how the images should be displayed
The code isn't working unfortunately; the images always get a fixed width. I've tried removing the empty td's, I've tried using fixed widths instead of percentages, I've tried using width by itself and as a style, I've tried all kinds of variations on putting the widths in different places, but seemingly no matter what I try, I am unable to display the images responsively, side by side. This is an issue on smartphone devices, where the images appear too large. Naturally, I cannot use media queries, as they are not supported in Outlook.
Any suggestions for how I could display the two images side by side responsively?
Thank you!
Best,
Javert
Try this One. Hope it Helps.
<div style="width:750px;">
<table style="width:100%;">
<tr>
<td style="width:40%; background-color: red; height:150px;"></td>
<td style="width:60%; background-color: yellow; height:150px;"></td>
</tr>
</table>
</div>
I was doing the same with mailchimp HTML/Code section, may be helpful for someone.
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="mcnImageGroupBlock" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;" >
<tbody class="mcnImageGroupBlockOuter">
<tr>
<td valign="top" style="mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;width" class="mcnImageGroupBlockInner">
<!--[if mso]>
<table align="left" border="0" cellspacing="0" cellpadding="0" width="100%" style="width:100%;">
<tr>
<![endif]-->
<!--[if mso]>
<td valign="top" width="600" style="width:600px;">
<![endif]-->
<table align="left" width="300" border="0" cellpadding="0" cellspacing="0" class="mcnImageGroupContentContainer" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
<tbody><tr>
<td class="mcnImageGroupContent" valign="top" style=";mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
<img alt="" src="https://via.placeholder.com/300.png/09f/fff" width="300" style="max-width: 600px;padding: 0;border: 0;height: auto;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;vertical-align: bottom;" class="mcnImage">
</td>
</tr>
</tbody></table>
<table align="center" width="300" border="0" cellpadding="0" cellspacing="0" class="mcnImageGroupContentContainer" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
<tbody><tr>
<td class="mcnImageGroupContent" valign="top" style="mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
<img alt="" src="https://via.placeholder.com/300.png/09f/fff" width="300" style="max-width: 600px;padding: 0;border: 0;height: auto;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;vertical-align: bottom;" class="mcnImage">
</td>
</tr>
</tbody></table>
<!--[if mso]>
</td>
<![endif]-->
<!--[if mso]>
</tr>
</table>
<![endif]-->
</td>
</tr>
</tbody>
</table>
I'm trying to make sure all the padding aligns as well as the text and logo aligning in this html.
The code I've used to make everything align is listed below.
<table cellpadding="0" cellspacing="0" style="width: 580px;table-layout: auto;" width="580">
<tbody>
<tr>
<td align="left" valign="top" style="font-family:'Arial, 'Georgia', Times New Roman, serif;font-weight:normal;font-size:15px;mso-line-height-rule:exactly;line-height:19px; color:#000000;" class="" width="400">
<div class="ee_editable" style="position: static;">
<div class="" style="padding-top: 10px;"><br></div>
<div class="headline">DISCOVER OUR<br> LATEST OFFERS</div>
<div> </div>
</td>
<td width="180">
<a href="https://dmtrk.net/t/20AS-67H0B-UDWVGK-3JC7VW-1/c.aspx" target="_blank">
<img src="http://www.kindlewood.co.uk/bmw_images/minilogo180x80.png" alt="MINI" width="117" height="52" class="ee_editable ee_smallimage ee_pnggif_image" title="MINI" align="right" border="0">
</a>
</td>
</tr>
<tr>
<td class="ee_dropzone" width="580" align="left" style="width: 580px;">
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="ee_element ee_imageelement" ee-type="element" data-title="Image" style="width: 580px;table-layout: auto;">
<tbody>
<tr>
<td style="font-size: 1px; line-height: 1px;" class=""><img border="0" src="https://i.emlfiles4.com/cmpimg/0/0/7/3/9/files/10607126_day10mniheader.png" style="width: 100%; min-height: auto; display: block; max-width: 100%;" class="ee_editable" width="580"></td>
</tr>
</tbody>
</table>
The above code is wrapped in a code like this:
<table border="0" cellpadding="0" cellspacing="0" width="640" style="width: 640px; background-color: rgb(255, 255, 255);table-layout: auto;" class="w320" bgcolor="#ffffff">
<tbody>
<tr>
<td align="center" style="min-width: 320px; padding-top: 0;padding-right: 0;padding-bottom: 0;padding-left: 0;" width="640">
<table cellpadding="0" cellspacing="0" style="width: 580px;table-layout: auto;" width="580">
Right now, the page displays as so:
But I need the white mini pic, text and logo to align with the rest of the page. Thanks for any input!
You need to span the td with the image across two columns, since the row above as two td's, if that makes sense.
So if you change
<td class="ee_dropzone" width="580" align="left" style="width: 580px;">
to
<td colspan="2" class="ee_dropzone" width="580" align="left" style="width: 580px;">
you should be good to go.
I created an email template, where I kept my layout width at 600px.
There are four columns of 150px width each.
It is working fine on all clients except with Outlook, where the layout breaks because of an unwanted column spacing.
I didn't use any explicit padding though.
Here is how it look-like in Outlook:
Any kind of help would be very appreciated.
<tr>
<td align="left" style="-moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; border-collapse: collapse; color: #4e5054; font-family: 'Verdana', 'Arial', 'Helvetica', sans-serif; font-size: 12px; font-smoothing: antialiased; font-weight: normal; line-height: 18px; margin: 0; padding: 0; vertical-align: top; padding-bottom:0;">
<!-- stat -->
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#e5e5e5">
<tr>
<td align="center" style="padding-top:20px; padding-bottom:20px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="display:block; max-width:600px;" class="wrapto680px">
<tr>
<td width="100%" valign="top" align="center" style="text-align:center; font-size:0px;">
<!--[if (gte mso 9)|(IE)]><table width="600" border="0" cellspacing="0" cellpadding="0"><tr><td valign="top" width="600"><![endif]-->
<div style="display:inline-block;" class="ecxmarginhack">
<table width="600" border="0" cellspacing="0" cellpadding="0" align="left">
<tr>
<td width="100%" valign="top">
<table width="150" border="0" cellspacing="0" cellpadding="0" align="left">
<tr>
<td style="font-size:0px;"><img style="display:block;" border="0" src="http://www.stevensegallery.com/200/200" width="150" height="150" alt=""/></td>
</tr>
</table>
<table width="150" border="0" cellspacing="0" cellpadding="0" align="left">
<tr>
<td style="font-size:0px;"><img style="display:block;" border="0" src="http://www.stevensegallery.com/200/200" width="150" height="150" alt=""/></td>
</tr>
</table>
<table width="150" border="0" cellspacing="0" cellpadding="0" align="left">
<tr>
<td style="font-size:0px;"><img style="display:block;" border="0" src="http://www.stevensegallery.com/200/200" width="150" height="150" alt=""/></td>
</tr>
</table>
<table width="150" border="0" cellspacing="0" cellpadding="0" align="left">
<tr>
<td style="font-size:0px;"><img style="display:block;" border="0" src="http://www.stevensegallery.com/200/200" width="150" height="150" alt=""/></td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]-->
</td>
</tr>
</table>
<!-- end 4 col --></td>
</tr>
</table>
<!-- End -->
</td>
</tr>
Coding tables as columns gets a little fiddly when it comes to outlook. By default when two tables are placed right beside each other, outlook adds space on the right. Here you have two options: 1. Go with ghost columns (personal favorite) or 2. Reduce table widths (and image widths) by a few pixels and add a style to tables (style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;").
Option 1: Ghost Columns
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="left" style="-moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; border-collapse: collapse; color: #4e5054; font-family: 'Verdana', 'Arial', 'Helvetica', sans-serif; font-size: 12px; font-smoothing: antialiased; font-weight: normal; line-height: 18px; margin: 0; padding: 0; vertical-align: top; padding-bottom:0;"><!-- stat -->
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#e5e5e5">
<tr>
<td align="center" style="padding-top:20px; padding-bottom:20px;"><table width="100%" border="0" cellspacing="0" cellpadding="0" style="display:block; max-width:600px;" class="wrapto680px">
<tr>
<td width="100%" valign="top" align="center" style="text-align:center; font-size:0px;"><!--[if (gte mso 9)|(IE)]><table width="600" border="0" cellspacing="0" cellpadding="0"><tr><td valign="top" width="600"><![endif]-->
<div style="display:inline-block;" class="ecxmarginhack">
<table width="600" border="0" cellspacing="0" cellpadding="0" align="left">
<tr>
<td width="100%" valign="top"><table width="150" border="0" cellspacing="0" cellpadding="0" align="left">
<tr>
<td style="font-size:0px;"><img style="display:block;" border="0" src="http://www.stevensegallery.com/200/200" width="150" height="150" alt=""/></td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]></td><td><![endif]-->
<table width="150" border="0" cellspacing="0" cellpadding="0" align="left">
<tr>
<td style="font-size:0px;"><img style="display:block;" border="0" src="http://www.stevensegallery.com/200/200" width="150" height="150" alt=""/></td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]></td><td><![endif]-->
<table width="150" border="0" cellspacing="0" cellpadding="0" align="left">
<tr>
<td style="font-size:0px;"><img style="display:block;" border="0" src="http://www.stevensegallery.com/200/200" width="150" height="150" alt=""/></td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]></td><td><![endif]-->
<table width="150" border="0" cellspacing="0" cellpadding="0" align="left">
<tr>
<td style="font-size:0px;"><img style="display:block;" border="0" src="http://www.stevensegallery.com/200/200" width="150" height="150" alt=""/></td>
</tr>
</table></td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]--></td>
</tr>
</table>
<!-- end 4 col --></td>
</tr>
</table>
<!-- End --></td>
</tr>
</tbody>
</table>
Option 2: Style on tables
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="left" style="-moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; border-collapse: collapse; color: #4e5054; font-family: 'Verdana', 'Arial', 'Helvetica', sans-serif; font-size: 12px; font-smoothing: antialiased; font-weight: normal; line-height: 18px; margin: 0; padding: 0; vertical-align: top; padding-bottom:0;"><!-- stat -->
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#e5e5e5">
<tr>
<td align="center" style="padding-top:20px; padding-bottom:20px;"><table width="100%" border="0" cellspacing="0" cellpadding="0" style="display:block; max-width:600px;" class="wrapto680px">
<tr>
<td width="100%" valign="top" align="center" style="text-align:center; font-size:0px;"><!--[if (gte mso 9)|(IE)]><table width="600" border="0" cellspacing="0" cellpadding="0"><tr><td valign="top" width="600"><![endif]-->
<div style="display:inline-block;" class="ecxmarginhack">
<table width="600" border="0" cellspacing="0" cellpadding="0" align="left">
<tr>
<td width="100%" valign="top"><table width="150" border="0" cellspacing="0" cellpadding="0" align="left" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
<tr>
<td style="font-size:0px;"><img style="display:block;" border="0" src="http://www.stevensegallery.com/200/200" width="150" height="150" alt=""/></td>
</tr>
</table>
<table width="150" border="0" cellspacing="0" cellpadding="0" align="left" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
<tr>
<td style="font-size:0px;"><img style="display:block;" border="0" src="http://www.stevensegallery.com/200/200" width="150" height="150" alt=""/></td>
</tr>
</table>
<table width="150" border="0" cellspacing="0" cellpadding="0" align="left" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
<tr>
<td style="font-size:0px;"><img style="display:block;" border="0" src="http://www.stevensegallery.com/200/200" width="150" height="150" alt=""/></td>
</tr>
</table>
<table width="150" border="0" cellspacing="0" cellpadding="0" align="left" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
<tr>
<td style="font-size:0px;"><img style="display:block;" border="0" src="http://www.stevensegallery.com/200/200" width="150" height="150" alt=""/></td>
</tr>
</table></td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]--></td>
</tr>
</table>
<!-- end 4 col --></td>
</tr>
</table>
<!-- End --></td>
</tr>
</tbody>
</table>
Hope this is the answer you were after.
Seems like a lot of unnecessary code. I would suggest using a much simpler code:
<div style="width: 600px; display: flex;">
<img style="border:0; width: 150px; height: 150px;" src="http://www.stevensegallery.com/200/200" alt=""/>
<img style="border:0; width: 150px; height: 150px;" src="http://www.stevensegallery.com/200/200" alt=""/>
<img style="border:0; width: 150px; height: 150px;" src="http://www.stevensegallery.com/200/200" alt=""/>
<img style="border:0; width: 150px; height: 150px;" src="http://www.stevensegallery.com/200/200" alt=""/>
</div>
Another option without using flex
<div style="width: 600px;">
<img style="border:0; width: 150px; height: 150px; float: left;" src="http://www.stevensegallery.com/200/200" alt=""/>
<img style="border:0; width: 150px; height: 150px; float: left;" src="http://www.stevensegallery.com/200/200" alt=""/>
<img style="border:0; width: 150px; height: 150px; float: left;" src="http://www.stevensegallery.com/200/200" alt=""/>
<img style="border:0; width: 150px; height: 150px; float: left;" src="http://www.stevensegallery.com/200/200" alt=""/>
</div>
SOLVED: Needed to declare a height on the main image that is nested in the table.
QUESTION: I have two tables that I'm trying to stack on top of one another in an html email but am getting a gap between them in Outlook 2016 only. The red box should touch the grey horizontal line. See picture below. All other version of Outlook are good. I've removed cell padding, borders, and spacing from all tables so I'm at a loss on this one. I also have this table aligned top. Any tricks to getting this to work in MSO 2016?
<table align="right" width="190" border="0" cellspacing="0" cellpadding="0" style="mso-table-lspace:0pt; mso-table-rspace:0pt; margin: 0 auto; border-collapse:collapse;" bgcolor="#6e7171">
<tr>
<td align="center" width="1">
<!-- margin SPACER-->
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse;">
<tr>
<td width="1" height="1" style="mso-line-height-rule:exactly; line-height:1px; font-size:0;">
<img src="images/sp.gif" width="1" height="1" alt="" border="0" style="display:block;" />
</td>
</tr>
</table>
<!-- /margin SPACER-->
</td>
<td align="center" bgcolor "#6e7171" class="hideMobile" width="188" align="left" class="outlookpadding" valign="top">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse;">
<tr>
<td width="1" height="1" style="mso-line-height-rule:exactly; line-height:1px; font-size:0;">
<img src="images/sp.gif" width="1" height="1" alt="" border="0" style="display:block;" />
</td>
</tr>
</table>
<table class="hideMobile" bgcolor "#6e7171" align="center" width="188" border="0" cellspacing="0" cellpadding="0" style="mso-table-lspace:0pt; mso-table-rspace:0pt; margin: 0 auto; border-collapse:collapse; margin: 0 auto;">
<tr>
<td align="center">
<table width="188" cellpadding="0" class="deviceWidth" cellspacing="0" border="0" bgcolor="#ffffff" align="center" style="border-collapse: collapse;">
<tr>
<td>
<a target="_blank" href="#"><img src="images/laptop.jpg" alt="Using laptop trackpad" width="190" style="display: block; width: 190px; " align="center"></a>
</td>
</tr>
<tr>
<td class="showMobile hideyahoo" valign="top" align="right" bgcolor="#ffffff" style="display: block; text-align: left; font-size: 14px; line-height: 18px; font-family:Arial, Helvetica, sans-serif;color:#e51b3f; mso-line-height-rule: exactly; padding-right: 10px; padding-left: 10px; padding-top: 18px; font-weight: bold;">Ask the right questions.</td>
</tr>
<tr>
<td class="showMobile hideyahoo" valign="top" align="right" display="block" bgcolor="#ffffff" style="text-align: left; font-size: 13px; line-height: 18px; font-family:Arial, Helvetica, sans-serif;color:#514d4d; mso-line-height-rule: exactly; padding-right: 10px; padding-left: 10px; padding-bottom: 15px; padding-top: 15px; ">Having an honest discussion with your doctor can help you take a more active role in your care. These conversation starters can help you know what to ask.</td>
</tr>
</table>
</td>
<td width="1">
<!-- margin -->
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse;">
<tr>
<td width="1" height="1" style="mso-line-height-rule:exactly; line-height:1px; font-size:0;">
<img src="images/sp.gif" width="1" height="1" alt="" border="0" style="display:block;" />
</td>
</tr>
</table>
<!-- /margin -->
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse;">
<tr>
<td width="1" height="1" style="mso-line-height-rule:exactly; line-height:1px; font-size:0;">
<img src="images/sp.gif" width="1" height="1" alt="" border="0" style="display:block;" />
</td>
</tr>
</table>
</td>
</tr>
</table>
<table align="right" valign="top" border="0" cellspacing="0" cellpadding="0" bgcolor="#ed1849" height="49" width="192" style="padding: 0; height: 49px; margin: 0 auto; border-collapse: collapse; display">
<tr>
<td style="padding-left: 10px;" height="44">
<table valign="top" border="0" cellspacing="0" cellpadding="0" bgcolor="#ed1849" height="44" style="border-collapse: collapse;">
<tr>
<td border="0" cellspacing="0" cellpadding="0" width="100%" align="center" valign="bottom" style="text-align: left; color: #ffffff; background-color: #ed1849; font-family:Arial, Helvetica, sans-serif; font-weight: bold; font-size: 13px; mso-line-height-rule: exactly;">GET QUESTIONS</td>
</tr>
<tr>
<td border="0" cellspacing="0" cellpadding="0" bgcolor="#ed1849">
<table border="0" cellspacing="0" cellpadding="0" bgcolor="#ed1849">
<tr>
<td border="0" cellspacing="0" cellpadding="0" align="center" valign="middle" style="text-align: left; color: #ffffff; background-color: #ed1849; font-family:Arial, Helvetica, sans-serif; font-weight: bold; font-size: 13px; mso-line-height-rule: exactly;">FOR YOUR DOCTOR</td>
<td height="11" bgcolor="#ed1849" align="left" valign="middle" style="padding-left: 7px; vertical-align: middle; font-size: 0;"><img valign="middle" width="8" height="11" style=" display: block; width: 8px; height:11px;" src="images/arrow.jpg" alt="arrow"></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
Have your tried using conditional comments?
For Outlook 2016 it should be something like the following:
<!--[if mso 16]>some outlook 2016 only stuff<![endif]-->
I have been searching for a fix for this for days and have inserted many different CSS and HTML tags that aren't fixing my issue. I have four separate images in their own tables (as I read that Outlook puts in breaks where it's decided a page should end) but there is an enormous pixel break being inserted between my third and fourth image. Any tips at all are welcome. I removed some of the code for privacy but this is the general format I've used for each of the four images. Thanks!
<div>
<table style="width: 600px; border-collapse: collapse;" border="0" cellspacing="0" cellpadding="0" align="center">
<tbody>
<tr>
<td align="center" valign="top" style="line-height: 1px; font-size: 0.0em;"><img alt="BlahBlahBlah" src="http://hosting-source.bm23.com/35156/public/abc.jpg" border="0" height="1053" usemap="#Map" width="600" style="color: white; font-size: 12px; display: block;" /></td>
</tr>
</tbody>
</table>
<table style="width: 600px; border-collapse: collapse;" border="0" cellspacing="0" cellpadding="0" align="center">
<tbody>
<tr style= "page-break-before: always">
<td align="center" valign="top" style="line-height: 1px; display: block; font-size: 0.0em;"><img alt="BlahBlahBlah" src="http://hosting-source.bm23.com/35156/public/abc2jpg" border="0" height="870" usemap="#Map2" width="600" style="color: white; font-size: 12px; display: block;" /></td>
</tr>
</tbody>
</table>
</div>
<p> </p>