Question posted in 
I’m using all the usual tricks: border=”0″ on img, style:display: block on img … nothing seems to work. I’ll not that I’m slicing up the images in photoshop and exporting with “save for web”, save as “HTML and Images.” This happens all the time, everytime I use this slicing method. The PS feature writes table-based markup which is ideal for emails (as you can’t use divs and expect them to work in email templates).
Sometime I will reslice everything using different areas and it works but that is a lot of work. I’d like to get it right the first time I slice up everything! And yes, I’ve read all the topics on here about horizontal spaces in outlook and nothing seems to work.
Here’s the markup (image locations removed):
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices -->
<table id="Table_01" width="600" height="1093" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="8">
<img border="0" style="display: block;" src="" width="600" height="98" alt=""></td>
</tr>
<tr>
<td colspan="8">
<img border="0" style="display: block;" src="" width="600" height="119" alt=""></td>
</tr>
<tr>
<td colspan="2">
<img border="0" style="display: block;" src="" width="182" height="442" alt=""></td>
<td colspan="6">
<img border="0" style="display: block;" src="" width="418" height="442" alt=""></td>
</tr>
<tr>
<td colspan="2">
<img border="0" style="display: block;" src="" width="182" height="51" alt=""></td>
<td>
<img border="0" style="display: block;" src="" width="140" height="51" alt=""></td>
<td colspan="5">
<img border="0" style="display: block;" src="" width="278" height="51" alt=""></td>
</tr>
<tr>
<td colspan="8">
<img border="0" style="display: block;" src="" width="600" height="128" alt=""></td>
</tr>
<tr>
<td>
<img border="0" style="display: block;" src="" width="150" height="91" alt=""></td>
<td colspan="3">
<img border="0" style="display: block;" src="" width="315" height="91" alt=""></td>
<td>
<img border="0" style="display: block;" src="" width="38" height="91" alt=""></td>
<td>
<img border="0" style="display: block;" src="" width="42" height="91" alt=""></td>
<td colspan="2">
<img border="0" style="display: block;" src="" width="55" height="91" alt=""></td>
</tr>
<tr>
<td colspan="8">
<img border="0" style="display: block;" src="" width="600" height="79" alt=""></td>
</tr>
<tr>
<td colspan="7">
<img border="0" style="display: block;" src="" width="599" height="84" alt=""></td>
<td>
<img border="0" style="display: block;" src="" width="1" height="84" alt=""></td>
</tr>
<tr>
<td>
<img border="0" style="display: block;" src="" width="150" height="1" alt=""></td>
<td>
<img border="0" style="display: block;" src="" width="32" height="1" alt=""></td>
<td>
<img border="0" style="display: block;" src="" width="140" height="1" alt=""></td>
<td>
<img border="0" style="display: block;" src="" width="143" height="1" alt=""></td>
<td>
<img border="0" style="display: block;" src="" width="38" height="1" alt=""></td>
<td>
<img border="0" style="display: block;" src="" width="42" height="1" alt=""></td>
<td>
<img border="0" style="display: block;" src="" width="54" height="1" alt=""></td>
<td>
<img border="0" style="display: block;" src="" width="1" height="1" alt=""></td>
</tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>
2
Answers
I was able to fix the issue by adding widths on each of the TDs.
It is really bad practice to build an entire email of of images. It doesn’t render by default in most email clients, takes a long time to download and also triggers some spam filters because your image to text ratio is so low.
That being said, you are getting the vertical gaps because Outlook doesn’t know how wide to make each of your cols when you use a colspan in the first row. See this answer for more information on how to enforce the col widths.
Update – Because you want to vary the widths of your cells, you need to use nested tables instead. You can not change the widths of tables from row to row. Here is an example of how you can construct this entire email with nested tables and without a single colspan:
As I mentioned before, you should avoid images and use text where text is, not an image of text. Here is an example of how your middle section should look like (the part with the images stacked on the left and text on the right):