Home/ Questions/Q 936495
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-15T21:19:25+00:00

I have been trying to create a HTML E-mail, which is just one image

  • 0

I have been trying to create a HTML E-mail, which is just one image that I sliced up using Fireworks CS4.
When looking at it in IE, Opera, and Firefox the actual image looks fine. However as soon as I import it into Microsoft Outlook 2007, I end up with a horizontal white spaces below the top image (WinstonsAd_r1_c1), and a vertical space between the bottom two images (WinstonsAd_r2_c1 and WinstonsAd_r2_c2 respectively).

I have cellpadding=”0″ cellspacing=”0″ border=”0″ and td img {display: block;}. I tried removing all spaces between the , and from the code.

For right now I haven’t uploaded the code or images to a web server, mainly due to the fact that the person I am doing this for has not purchased one yet. 

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <!-- saved from url=(0014)about:internet -->
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <title>WinstonsAd.gif</title>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <!--Fireworks CS3 Dreamweaver CS3 target.  Created Thu Jul 22 17:06:09 GMT-0400 (Eastern Daylight Time) 2010-->
</head>
<body bgcolor="#ffffff">
<style type="text/css">td img {display: block;}</style>
<table border="0" cellpadding="0" cellspacing="0" width="1023">
<!-- fwtable fwsrc="Untitled" fwpage="Page 1" fwbase="WinstonsAd.gif" fwstyle="Dreamweaver" fwdocid = "35095674" fwnested="0" -->
<tr>
<td><img src="spacer.gif" width="646" height="1" border="0" alt="" /></td>
<td><img src="spacer.gif" width="377" height="1" border="0" alt="" /></td>
<td><img src="spacer.gif" width="1" height="1" border="0" alt="" /></td>
</tr>

<tr>
<td colspan="2"><a href="http://www.winstonsbilliards.com"><img name="WinstonsAd_r1_c1" src="WinstonsAd_r1_c1.gif" width="1023" height="647" border="0" id="WinstonsAd_r1_c1" alt="Visit Our Home Page" /></a></td>
<td><img src="spacer.gif" width="1" height="647" border="0" alt="" /></td>
</tr>
<tr>
<td><a href="http://www.google.com/maps?source=s_q&amp;hl=en&amp;q=Winstons+Billiards+Cafe&amp;sll=39.005045,-77.067375&amp;sspn=0.259055,0.458336&amp;ie=UTF8&amp;cd=1&amp;hq=Winstons+Billiards+Cafe&amp;hnear=1776+E+Jefferson+St,+Rockville,+Montgomery,+Maryland+20852&amp;geocode=FQBAVAIdGuhm-w&amp;ll=39.057"><img name="WinstonsAd_r2_c1" src="WinstonsAd_r2_c1.gif" width="646" height="35" border="0" id="WinstonsAd_r2_c1" alt="Google Map To Winston's" /></a></td>
<td><a href="http://www.winstonsbilliards.com"><img name="WinstonsAd_r2_c2" src="WinstonsAd_r2_c2.gif" width="377" height="35" border="0" id="WinstonsAd_r2_c2" alt="Visit Our Home Page" /></a></td>
<td><img src="spacer.gif" width="1" height="35" border="0" alt="" /></td>
</tr>
</table>
</body>
</html>

Any incite to why this is still happening would be much appreciated.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I see a couple of things going on here:

    <tr>
<td><img src="spacer.gif" width="646" height="1" border="0" alt="" /></td>
<td><img src="spacer.gif" width="377" height="1" border="0" alt="" /></td>
<td><img src="spacer.gif" width="1" height="1" border="0" alt="" /></td>
</tr>

<tr>
<td colspan="2"><a href="http://www.winstonsbilliards.com"><img name="WinstonsAd_r1_c1" src="WinstonsAd_r1_c1.gif" width="1023" height="647" border="0" id="WinstonsAd_r1_c1" alt="Visit Our Home Page" /></a></td>
<td><img src="spacer.gif" width="1" height="647" border="0" alt="" /></td>
</tr>
<tr>

    Acid test reports that your columns don’t add up to total width. This may not be the entire problem, but it could be part of the problem. Either adjust your table overall width or subtract one from a td.

    Outlook 07/10 doesn’t support display:block formatting on your image. Also, spacer.gif is a relative link that will break when you send. Here’s a great resource for knowing which CSS elements work (or don’t, on Outlook) http://www.campaignmonitor.com/downloads/documents-tools/Campaign_Monitor_Guide_to_CSS_Support_in_Email_April_2010.pdf

    From a UI standpoint, your page is pretty wide…most people I know run outlook with several “panes” on and this will cause it to oversize…ditto on Hotmail, causing an error dialog. Consider dropping your size down to 800 or even lower. I send out a lot of emails for work and we never go bigger than 750. Finally, outlook and Gmail disable images by default. Since there’s no content there besides images, all users will initially see nothing until they take action…not good. Many will never bother to click the link, making your email ineffective to that portion of the audience. Text ain’t sexy…but you are virtually guaranteed that your audience will see it. Good luck.

    • 0