Stacked images in HTML email template have a space between them

Question

I'm building a template for an HTML email I'll being sending via .NET. I don't do this often and I know I have to stick to tables and inline CSS. I just sliced up some images and I have two that need to stack. I understand there are issues with this in terms of whitespace in the HTML code. As a result, I've tried it all on one line, e.g.

<td valign="top" style="width: 314px;"><img src="/i/header_logo.jpg" width="314" height="92" alt="Logo" /><br /><img src="/i/woman.jpg" width="314" height="617" alt="Woman" /></td>

I'm previewing this in my browser and the two images are separated by some space. I also have a global line of CSS resets at the top like:

<style type="text/css">
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}ol,ul{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;}
</style>

Does anyone know how to stack two images in a <td> and have them flush against each other?

Update: It turns out I had a doctype at the top like a normal web page and that caused the issue. It had nothing to do with my HTML/CSS combo.

Answer 1

You could cheat, and embed another table within the column containing the pics.

<td>
  <table>
    <tr><td align="left"><img1 ...></td></tr>
    <tr><td align="left"><img2 ...></td></tr>  
  </table>
</td>

Is that what you mean by stacked and flush?

Answer 2

I figured out the problem. I didn't have a doctype defined and therefore the rendering mode was really messed up.

Answer 3

alternatively try align="left" on your images. Works in some email clients.