Thursday, May 16, 2013

Making Sliced Emails Work Reliably In All Browsers

After spending the last 2 and 1/2 hours fighting my a new email with a complicated table (created by Photoshop) I have determined that the following items are crucial to avoid gaps and alignment problems in Internet Explorer, Chrome, and Safari. 

  1. Photoshop's blank 1px spacer table cells at the end of each column and row are ingenious and important.   Don't delete them (like I did) because they keep IE from screwing up the table in email clients.
  2. Photoshop puts an accurate height on the containing table which is important for IE which can't add?
  3. Wherever you see an alt tag (the images) search and replace in 'border="0" style="display:block"' which makes Chrome and Safari deal with spacing better.
With these three items I think your table will not get screwed up... knock on wood.