HTML emailer design issues....help!

HTML & CSS
1

I am having trouble with html emailers in Hotmail

It seems to be a known issue, where images are given padding below of about 5 pixels. Setting display:block to images is supposed to fix this…but…

If I send the emailer as a test using it as Stationery in Outlook (2007 on Win7) then this issue is still there. But if I send it via Icontact.com then the problem is not there.

However Icontact.com adds tracking code, and these emailers arent going to be sent ultimately via Icontact.

So I am looking for two things. What else can I do to stop this extra padding below images (setting margin and padding to 0px doesnt work either)

And also, is there another way to simply send an HTML emailer without the software “getting involved” (I assume Outlook is interfering somehow with the design)

Thanks!

2

How did you send the email to hotmail?

If I send using Outlook, and view hotmail in Firefox, then its got the gaps with my code…

Thanks for testing.

3

Both of these combinations worked for me when I tested them in Hotmail:

<td><img style="display:block; padding:0px; margin:0px;" src="http://www.viewproject.co.uk/imgtest/imgtest.jpg" width="506" height="144"></td>

<td><img style="[COLOR="Red"]vertical-align:bottom;[/COLOR] padding:0px; margin:0px;" src="http://www.viewproject.co.uk/imgtest/imgtest.jpg" width="506" height="144"></td>
4

I sent it with Safari, and it was fine in Hotmail (viewed in Firefox) and then sent it with Thunderbird and it was still fine. :confused:

5

Hi metamoota,

it could be a number of things. One thing I would try is to add vertical-align: bottom to the images. E.g.

<img src=“” style=“vertical-align:bottom;” alt=“”>

Also, try removing any white space from <td>s.

If that doesn’t help, post the code you are using so we can test it.

6

Thanks alot for the reply
I have made a very quick demo page. 3 simple images in a table, table background is set to pink, so basically you should not see any pink, but you do when in hotmail…

(for this test I used IE7’s “send page by email” to send to my hotmail).

Thanks!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>
<table width="444" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#FF00FF">
  <tr> 
    <td><img style="display:block; padding:0px; margin:0px;" src="http://www.viewproject.co.uk/imgtest/imgtest.jpg" width="506" height="144"></td>
  </tr>
  <tr> 
    <td><img style="display:block; padding:0px; margin:0px;" src="http://www.viewproject.co.uk/imgtest/imgtest.jpg" width="506" height="144"></td>
  </tr>
  <tr> 
    <td><img style="display:block; padding:0px; margin:0px;" src="http://www.viewproject.co.uk/imgtest/imgtest.jpg" width="506" height="144"></td>
  </tr>
</table>
</body>
</html>