CODEWITHSUNDEEP
htmlemail
Mark Ursino
Mark Ursino

Reputation: 31435

Stacked images in HTML email template have a space between them

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.

Upvotes: 1

Views: 3196

Answers (3)

Tokimon
Tokimon

Reputation: 4152

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

Upvotes: 1

Mark Ursino
Mark Ursino

Reputation: 31435

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

Upvotes: 1

Jagd
Jagd

Reputation: 7306

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?

Upvotes: 0

Related Questions