I'm currently trying to create new signatures for my company using Photoshop, and when I've sliced the image, the .html file displays properly in Chrome / Firefox but when uploaded to Outlook as a signature, it's full of gaps.
Can anyone help me please as it's driving me crazy?
It seems as though many people have issues with Outlook templates and I'm struggling to find a solution, any help would be very much appreciated!
<table>
<tr>
<td><html></td>
</tr>
</table>
<head>
<title>New Sig Template</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (New Sig Template.psd) -->
<table id="Table_01" width="555" height="289" border="0" cellpadding="0" cellspacing="0" line-height: 50%>
<tr>
<td colspan="15" style="line-height:0;">>
<img src="https://www.impact-london.com/NewEmails/Hannah_01.png" width="554" height="9" alt="">
</td>
<td>
<img src="https://www.impact-london.com/NewEmails/spacer.gif" width="1" height="9" alt="">
</td>
</tr>
<tr>
<td colspan="13">
<img src="https://www.impact-london.com/NewEmails/Hannah_02.png" width="407" height="14" alt="">
</td>
<td rowspan="2">
<a href="http://www.impact-london.com" target="New">
<img src="https://www.impact-london.com/NewEmails/Impact-Click.png" width="135" height="28" border="0" alt="">
</a>
</td>
<td rowspan="8">
<img src="https://www.impact-london.com/NewEmails/Hannah_04.png" width="12" height="279" alt="">
</td>
<td>
<img src="https://www.impact-london.com/NewEmails/spacer.gif" width="1" height="14" alt="">
</td>
</tr>
<tr>
<td colspan="2" rowspan="4">
<img src="https://www.impact-london.com/NewEmails/Hannah_05.png" width="27" height="109" alt="">
</td>
<td colspan="7" rowspan="3">
<a href="https://www.linkedin.com/in/hannah-willmore-580820134/" target="New">
<img src="https://www.impact-london.com/NewEmails/Hannah---LinkedIn.png" width="106" height="106" border="0" alt="">
</a>
</td>
<td colspan="4" rowspan="2">
<img src="https://www.impact-london.com/NewEmails/Hannah_07.png" width="274" height="95" alt="">
</td>
<td>
<img src="https://www.impact-london.com/NewEmails/spacer.gif" width="1" height="14" alt="">
</td>
</tr>
<tr>
<td rowspan="6">
<img src="https://www.impact-london.com/NewEmails/Hannah_08.png" width="135" height="251" alt="">
</td>
<td>
<img src="https://www.impact-london.com/NewEmails/spacer.gif" width="1" height="81" alt="">
</td>
</tr>
<tr>
<td colspan="2" rowspan="2">
<img src="https://www.impact-london.com/NewEmails/Hannah_09.png" width="23" height="14" alt="">
</td>
<td rowspan="2">
<img src="https://www.impact-london.com/NewEmails/Hannah_10.png" width="155" height="14" alt="">
</td>
<td rowspan="5">
<img src="https://www.impact-london.com/NewEmails/Hannah_11.png" width="96" height="170" alt="">
</td>
<td>
<img src="https://www.impact-london.com/NewEmails/spacer.gif" width="1" height="11" alt="">
</td>
</tr>
<tr>
<td colspan="7">
<img src="https://www.impact-london.com/NewEmails/Hannah_12.png" width="106" height="3" alt="">
</td>
<td>
<img src="https://www.impact-london.com/NewEmails/spacer.gif" width="1" height="3" alt="">
</td>
</tr>
<tr>
<td rowspan="3">
<img src="https://www.impact-london.com/NewEmails/Hannah_13.png" width="26" height="156" alt="">
</td>
<td colspan="2" rowspan="2">
<a href="https://twitter.com/Impact_Recruit" target="New">
<img src="https://www.impact-london.com/NewEmails/Impact-Twitter.png" width="24" height="25" border="0" alt="">
</a>
</td>
<td rowspan="3">
<img src="https://www.impact-london.com/NewEmails/Hannah_15.png" width="4" height="156" alt="">
</td>
<td>
<a href="https://www.instagram.com/impact_recruit/" target="New">
<img src="https://www.impact-london.com/NewEmails/Impact-Instagram.png" width="25" height="24" border="0" alt="">
</a>
</td>
<td rowspan="3">
<img src="https://www.impact-london.com/NewEmails/Hannah_17.png" width="4" height="156" alt="">
</td>
<td>
<a href="https://www.facebook.com/impactcreativerec/" target="New">
<img src="https://www.impact-london.com/NewEmails/Impact-Facebook.png" width="24" height="24" border="0" alt="">
</a>
</td>
<td rowspan="3">
<img src="https://www.impact-london.com/NewEmails/Hannah_19.png" width="5" height="156" alt="">
</td>
<td colspan="2">
<a href="https://www.linkedin.com/company/impact-creative-recruitment-ltd/" target="New">
<img src="https://www.impact-london.com/NewEmails/Impact-LinkedIn.png" width="24" height="24" border="0" alt="">
</a>
</td>
<td colspan="2" rowspan="3">
<img src="https://www.impact-london.com/NewEmails/Hannah_21.png" width="175" height="156" alt="">
</td>
<td>
<img src="https://www.impact-london.com/NewEmails/spacer.gif" width="1" height="24" alt="">
</td>
</tr>
<tr>
<td rowspan="2">
<img src="https://www.impact-london.com/NewEmails/Hannah_22.png" width="25" height="132" alt="">
</td>
<td rowspan="2">
<img src="https://www.impact-london.com/NewEmails/Hannah_23.png" width="24" height="132" alt="">
</td>
<td colspan="2" rowspan="2">
<img src="https://www.impact-london.com/NewEmails/Hannah_24.png" width="24" height="132" alt="">
</td>
<td>
<img src="https://www.impact-london.com/NewEmails/spacer.gif" width="1" height="1" alt="">
</td>
</tr>
<tr>
<td colspan="2">
<img src="https://www.impact-london.com/NewEmails/Hannah_25.png" width="24" height="131" alt="">
</td>
<td>
<img src="https://www.impact-london.com/NewEmails/spacer.gif" width="1" height="131" alt="">
</td>
</tr>
<tr>
<td>
<img src="https://www.impact-london.com/NewEmails/spacer.gif" width="26" height="1" alt="">
</td>
<td>
<img src="https://www.impact-london.com/NewEmails/spacer.gif" width="1" height="1" alt="">
</td>
<td>
<img src="https://www.impact-london.com/NewEmails/spacer.gif" width="23" height="1" alt="">
</td>
<td>
<img src="https://www.impact-london.com/NewEmails/spacer.gif" width="4" height="1" alt="">
</td>
<td>
<img src="https://www.impact-london.com/NewEmails/spacer.gif" width="25" height="1" alt="">
</td>
<td>
<img src="https://www.impact-london.com/NewEmails/spacer.gif" width="4" height="1" alt="">
</td>
<td>
<img src="https://www.impact-london.com/NewEmails/spacer.gif" width="24" height="1" alt="">
</td>
<td>
<img src="https://www.impact-london.com/NewEmails/spacer.gif" width="5" height="1" alt="">
</td>
<td>
<img src="https://www.impact-london.com/NewEmails/spacer.gif" width="21" height="1" alt="">
</td>
<td>
<img src="https://www.impact-london.com/NewEmails/spacer.gif" width="3" height="1" alt="">
</td>
<td>
<img src="https://www.impact-london.com/NewEmails/spacer.gif" width="20" height="1" alt="">
</td>
<td>
<img src="https://www.impact-london.com/NewEmails/spacer.gif" width="155" height="1" alt="">
</td>
<td>
<img src="https://www.impact-london.com/NewEmails/spacer.gif" width="96" height="1" alt="">
</td>
<td>
<img src="https://www.impact-london.com/NewEmails/spacer.gif" width="135" height="1" alt="">
</td>
<td>
<img src="https://www.impact-london.com/NewEmails/spacer.gif" width="12" height="1" alt="">
</td>
<td></td>
</tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>
write style = "display: block" inline in img tags
Example:
<img src="..." style="display:block">
Will you give information after you try it
Related
Really pretty confused here. I have no idea how to inspect elements in the Gmail app on my phone to understand what CSS is/isn't working. The email looks great on my mom's phone, on desktop, at gmail.com ON my android, but not on the gmail app on Android.
Here's the bad display on my phone, followed by one that's correctly displayed:
There was similar whitespace, but vertically, before I added font-size: 0px. No idea why THAT worked.
<html>
<head>
<title>IGS-email (1)</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body class="body" bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!--Including the trackingIme tag will allow your open rates to be tracked for this campaign-->
[[trackingImage]]
<!-- Save for Web Slices (IGS-email (1).psd) -->
<div class="linkWrapper" style="display: flex; justify-content: center;">
<a style="margin: 0 auto;" href="[[viewAsWebpage]]">View as Webpage</a>
</div>
<table id="Table_01" width="800" height="998" border="0" cellpadding="0" cellspacing="0" style="font-size: 0px !important; margin: 0 auto;">
<tr>
<td rowspan="11">
<img src="https://....jpg" width="47" height="907" alt></td>
<td colspan="22">
<img src="https://....jpg" width="706" height="26" alt></td>
<td rowspan="11">
<img src="https://....jpg" width="47" height="907" alt></td>
</tr>
<tr>
<td colspan="4">
<a href="https://.../" target="_blank">
<img src="https://....jpg" width="64" height="16" border="0" alt="aboutpage"></a></td>
<td colspan="3">
<img src="https://....jpg" width="45" height="16" alt></td>
<td colspan="2">
<a href="https://.../" target="_blank">
<img src="https://....jpg" width="95" height="16" border="0" alt="servicespage"></a></td>
<td colspan="3">
<img src="https://....jpg" width="88" height="16" alt></td>
<td colspan="2" rowspan="3">
<a href="https://..." target="_blank">
<img src="https://....jpg" width="119" height="134" border="0" alt="logo"></a></td>
<td colspan="2">
<img src="https://.......jpg" width="98" height="16" alt></td>
<td colspan="2">
<a href="https://.../" target="_blank">
<img src="....jpg" width="117" height="16" border="0" alt="industriespage"></a></td>
<td>
<img src="https://....jpg" width="28" height="16" alt></td>
<td colspan="3">
<a href="https://.../" target="_blank">
<img src="....jpg" width="52" height="16" border="0" alt="jobspage"></a></td>
</tr>
<tr>
<td colspan="12">
<img src="https://....jpg" width="292" height="27" alt></td>
<td colspan="8">
<img src="https://....jpg" width="295" height="27" alt></td>
</tr>
<tr>
<td colspan="12">
<img src="https://....jpg" width="292" height="91" alt></td>
<td colspan="8">
<img src="https://....jpg" width="295" height="91" alt></td>
</tr>
<tr>
<td colspan="2">
<img src="https://....jpg" width="40" height="124" alt></td>
<td colspan="18">
<img src="https://....jpg" width="626" height="124" alt></td>
<td colspan="2">
<img src="https://....jpg" width="40" height="124" alt></td>
</tr>
<tr>
<td colspan="2">
<img src="https://....jpg" width="40" height="492" alt></td>
<td colspan="19">
<img src="https://....jpg" width="627" height="492" alt="emailbody"></td>
<td>
<img src="https://....jpg" width="39" height="492" alt></td>
</tr>
<tr>
<td colspan="22">
<img src="https://....jpg" width="706" height="26" alt></td>
</tr>
<tr>
<td colspan="22">
<img src="https://....jpg" width="706" height="16" alt></td>
</tr>
<tr>
<td colspan="11" rowspan="3">
<img src="https://....jpg" width="272" height="89" alt></td>
<td colspan="2">
<img src="https://....jpg" width="135" height="15" alt></td>
<td colspan="9" rowspan="3">
<img src="https://....jpg" width="299" height="89" alt></td>
</tr>
<tr>
<td colspan="2">
<a href="https://..." target="_blank">
<img src="https://....jpg" width="135" height="45" border="0" alt="reviewbutton"></a></td>
</tr>
<tr>
<td colspan="2">
<img src="https://....jpg" width="135" height="29" alt></td>
</tr>
<tr>
<td>
<img src="https://....jpg" width="47" height="30" alt></td>
<td colspan="22">
<img src="https://....jpg" width="706" height="30" alt></td>
<td>
<img src="https://....jpg" width="47" height="30" alt></td>
</tr>
<tr>
<td rowspan="2">
<img src="https://....jpg" width="47" height="60" alt></td>
<td>
<a href="https://www.facebook.com/..." target="_blank">
<img src="https://....jpg" width="22" height="30" border="0" alt="facebook-igs"></a></td>
<td colspan="2">
<img src="https://....jpg" width="22" height="30" alt></td>
<td colspan="2">
<a href="https://www.instagram.com/.../" target="_blank">
<img src="https://....jpg" width="29" height="30" border="0" alt="instagram-gs"></a></td>
<td>
<img src="https://....jpg" width="20" height="30" alt></td>
<td colspan="2">
<a href="https://www.linkedin.com/company.../" target="_blank">
<img src="https://....jpg" width="33" height="30" border="0" alt="linkedin-igs"></a></td>
<td colspan="2">
<img src="https://....jpg" width="132" height="30" alt></td>
<td colspan="5">
<a href="https://..." target="_blank">
<img src="https:/....jpg" width="202" height="30" border="0" alt="url"></a></td>
<td colspan="2">
<img src="https://....jpg" width="89" height="30" alt></td>
<td colspan="5">
<img src="https://....jpg" width="157" height="30" alt="phonenumber"></td>
<td rowspan="2">
<img src="https://....jpg" width="47" height="60" alt></td>
</tr>
<tr>
<td colspan="22">
<img src="https://....jpg" width="706" height="30" alt></td>
</tr>
<tr>
<td>
<img src="https://....gif" width="47" height="1" alt></td>
<td>
<img src="https://....gif" width="22" height="1" alt></td>
<td>
<img src="https://....gif" width="18" height="1" alt></td>
<td>
<img src="https://....gif" width="4" height="1" alt></td>
<td>
<img src="https://....gif" width="20" height="1" alt></td>
<td>
<img src="https://....gif" width="9" height="1" alt></td>
<td>
<img src="https://....gif" width="20" height="1" alt></td>
<td>
<img src="https://....gif" width="16" height="1" alt></td>
<td>
<img src="https://....gif" width="17" height="1" alt></td>
<td>
<img src="https://....gif" width="78" height="1" alt></td>
<td>
<img src="https://....gif" width="54" height="1" alt></td>
<td>
<img src="https://....gif" width="14" height="1" alt></td>
<td>
<img src="https://....gif" width="20" height="1" alt></td>
<td>
<img src="https://....gif" width="115" height="1" alt></td>
<td>
<img src="https://....gif" width="4" height="1" alt></td>
<td>
<img src="https://....gif" width="49" height="1" alt></td>
<td>
<img src="https://....gif" width="49" height="1" alt></td>
<td>
<img src="https://....gif" width="40" height="1" alt></td>
<td>
<img src="https://....gif" width="77" height="1" alt></td>
<td>
<img src="https://....gif" width="28" height="1" alt></td>
<td>
<img src="https://....gif" width="12" height="1" alt></td>
<td>
<img src="https://....gif" width="1" height="1" alt></td>
<td>
<img src="https://....gif" width="39" height="1" alt></td>
<td>
<img src="https://....gif" width="47" height="1" alt></td>
</tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>
If I open your HTML in Chrome on desktop on macOS, and I zoom in or zoom out, I get the exact same rendering issue as in your screenshot. My guess is the problem is that the Gmail app on your phone is auto-scaling the email to fit the screen, thus giving a similar rendering than what we can see in desktop in Chrome.
My advice would be first to get rid of the giant table with colspan and rowspan and replace this with individual nested tables. You might also try to make more simple slices of images in order to help the auto-scaling. If you manage to make it right in Chrome at different zoom levels, it should be ok on your phone.
I created a newsletter with photoshop and Dreamweaver. I use the slice tools to edit certain parts of the newsletter. When I receive the newsletter everything is ok and looks good. When I forward it to another email, then everything is uneven and there's a big white line where I used the slice tool.
I use
td img { display:block;) code but it doesn't take effect when I forward the email. Here is the code:
<html>
<head>
<style type="text/css">
td img {
display: block;
}
</style>
<title>COMEME</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (COMEME.psd) -->
<table id="Table_01" width="613" height="2101" border="0" cellpadding="0" cellspacing="0" style="margin: 0 auto 0 auto;">
<tr>
<td colspan="16">
<a href="https://comemearreglos.com/">
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/b2337bae-4f09-4cbd-a86c-36d9a75a69be.jpg" width="612" height="298" border="0" alt=""></a></td>
<td>
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/f89c7286-9433-4041-9674-c395f9073d04.gif" width="1" height="298" alt=""></td>
</tr>
<tr>
<td colspan="16">
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/d388fb87-d763-489d-8357-58611c94338a.jpg" width="612" height="59" alt=""></td>
<td>
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/f89c7286-9433-4041-9674-c395f9073d04.gif" width="1" height="59" alt=""></td>
</tr>
<tr>
<td colspan="16">
<a href="https://www.youtube.com/watch?v=lWXPkCBUFnYa">
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/609b07a7-1537-4808-bdd5-9e0075aad773.jpg" width="612" height="349" border="0" alt=""></a></td>
<td>
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/f89c7286-9433-4041-9674-c395f9073d04.gif" width="1" height="349" alt=""></td>
</tr>
<tr>
<td colspan="16">
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/d5734d30-bbff-4612-97a5-bf0d06974ea9.jpg" width="612" height="17" alt=""></td>
<td>
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/f89c7286-9433-4041-9674-c395f9073d04.gif" width="1" height="17" alt=""></td>
</tr>
<tr>
<td colspan="7">
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/ff459b85-e0b4-4746-baee-08f8a866c5a4.jpg" width="252" height="234" alt=""></td>
<td colspan="8" rowspan="2">
<a href="https://comemearreglos.com/collections/dia-de-las-madres/products/florecer-de-margaritas">
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/71ff2c8f-a5c2-4640-8d8a-6a7d9b1ce5ff.jpg" width="353" height="518" border="0" alt=""></a></td>
<td rowspan="4">
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/850e2f71-cfeb-4e4c-8b2b-23f56afca360.jpg" width="7" height="599" alt=""></td>
<td>
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/f89c7286-9433-4041-9674-c395f9073d04.gif" width="1" height="234" alt=""></td>
</tr>
<tr>
<td colspan="7" rowspan="2">
<a href="https://comemearreglos.com/collections/dia-de-las-madres/products/alegria-de-margarita">
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/faf69cb1-f878-4f53-8786-62580a2214e6.jpg" width="252" height="345" border="0" alt=""></a></td>
<td>
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/f89c7286-9433-4041-9674-c395f9073d04.gif" width="1" height="284" alt=""></td>
</tr>
<tr>
<td colspan="8" rowspan="2">
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/c256f1f3-896d-4e39-8823-5d96361f79d3.jpg" width="353" height="81" alt=""></td>
<td>
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/f89c7286-9433-4041-9674-c395f9073d04.gif" width="1" height="61" alt=""></td>
</tr>
<tr>
<td colspan="7">
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/25661d89-4fb7-402d-a7d5-69333c050f54.jpg" width="252" height="20" alt=""></td>
<td>
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/f89c7286-9433-4041-9674-c395f9073d04.gif" width="1" height="20" alt=""></td>
</tr>
<tr>
<td colspan="4">
<a href="https://comemearreglos.com/collections/dia-de-las-madres/products/ramo-bombon-grande">
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/078da33a-90f6-4b9c-ba95-bfd6930a2888.jpg" width="204" height="264" border="0" alt=""></a></td>
<td colspan="8">
<a href="https://comemearreglos.com/collections/dia-de-las-madres/products/abanico-de-margaritas">
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/2ec18a16-da30-4998-98e5-2222e7d50d1a.jpg" width="204" height="264" border="0" alt=""></a></td>
<td colspan="4">
<a href="https://comemearreglos.com/collections/dia-de-las-madres/products/caja-sorpresa">
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/c2f034a3-9c6a-493d-a877-1f5179f198f0.jpg" width="204" height="264" border="0" alt=""></a></td>
<td>
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/f89c7286-9433-4041-9674-c395f9073d04.gif" width="1" height="264" alt=""></td>
</tr>
<tr>
<td rowspan="6">
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/7d0e5d3f-bd0c-42e4-b9c3-d5d3815459b2.jpg" width="3" height="514" alt=""></td>
<td colspan="4">
<a href="https://comemearreglos.com/products/corazon-de-fresa-normal">
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/5cbd5ac8-eba3-49e7-ae7c-98455ef803e0.jpg" width="203" height="294" border="0" alt=""></a></td>
<td colspan="8">
<a href="https://comemearreglos.com/collections/dia-de-las-madres/products/ramo-sorpresa">
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/f961ee13-9185-416b-ae26-234ff3ff171f.jpg" width="219" height="294" border="0" alt=""></a></td>
<td colspan="3">
<a href="https://comemearreglos.com/collections/dia-de-las-madres/products/kyara">
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/319c70e6-0880-497e-9fd0-42eb101065e9.jpg" width="187" height="294" border="0" alt=""></a></td>
<td>
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/f89c7286-9433-4041-9674-c395f9073d04.gif" width="1" height="294" alt=""></td>
</tr>
<tr>
<td colspan="15">
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/093c362d-72ae-48b9-8d2f-273fcf08b010.jpg" width="609" height="76" alt=""></td>
<td>
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/f89c7286-9433-4041-9674-c395f9073d04.gif" width="1" height="76" alt=""></td>
</tr>
<tr>
<td colspan="2" rowspan="2">
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/565d44c0-88c8-46e8-ac3e-a5266ac185a5.jpg" width="190" height="96" alt=""></td>
<td colspan="8">
<a href="https://comemearreglos.com/">
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/bec9d089-7f39-46d3-a7b9-7e125b5d1806.jpg" width="205" height="37" border="0" alt=""></a></td>
<td colspan="5" rowspan="2">
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/614847c7-6dca-42df-8f28-c0fb7d46a342.jpg" width="214" height="96" alt=""></td>
<td>
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/f89c7286-9433-4041-9674-c395f9073d04.gif" width="1" height="37" alt=""></td>
</tr>
<tr>
<td colspan="8">
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/b2498e85-f1a1-4141-84d9-cef2157d7436.jpg" width="205" height="59" alt=""></td>
<td>
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/f89c7286-9433-4041-9674-c395f9073d04.gif" width="1" height="59" alt=""></td>
</tr>
<tr>
<td rowspan="2">
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/2f9ad99a-57db-4455-bb47-33e8268f8605.jpg" width="183" height="48" alt=""></td>
<td colspan="4">
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/2748320c-5a61-4321-a0c5-d7ee800ca95a.jpg" width="45" height="41" alt=""></td>
<td colspan="2">
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/36cb6fe6-5e0d-4129-93ee-ab3cc76a4be6.jpg" width="44" height="41" alt=""></td>
<td>
<a href="https://www.facebook.com/acomeme">
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/1524864e-1691-4dc5-b348-f8c2f127a034.jpg" width="44" height="41" border="0" alt=""></a></td>
<td>
<a href="https://www.instagram.com/comemearreglos/">
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/9fe75a76-b488-4a99-bedd-018154afbbf8.jpg" width="44" height="41" border="0" alt=""></a></td>
<td colspan="2">
<a href="https://es.pinterest.com/arregloscomeme/">
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/e75c1785-63c1-4d29-8f7b-ca052c56985a.jpg" width="45" height="41" border="0" alt=""></a></td>
<td colspan="2">
<a href="https://www.youtube.com/user/ComemeArreglos">
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/1de8b935-c5b4-4ca1-b292-1f94fe5ca573.jpg" width="44" height="41" border="0" alt=""></a></td>
<td colspan="2" rowspan="2">
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/07cfe6db-5679-4694-b24a-87884f4c1410.jpg" width="160" height="48" alt=""></td>
<td>
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/f89c7286-9433-4041-9674-c395f9073d04.gif" width="1" height="41" alt=""></td>
</tr>
<tr>
<td colspan="12">
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/2e95bd34-40d0-4c96-af9b-d81a9f6b60ae.jpg" width="266" height="7" alt=""></td>
<td>
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/f89c7286-9433-4041-9674-c395f9073d04.gif" width="1" height="7" alt=""></td>
</tr>
<tr>
<td>
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/f89c7286-9433-4041-9674-c395f9073d04.gif" width="3" height="1" alt=""></td>
<td>
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/f89c7286-9433-4041-9674-c395f9073d04.gif" width="183" height="1" alt=""></td>
<td>
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/f89c7286-9433-4041-9674-c395f9073d04.gif" width="7" height="1" alt=""></td>
<td>
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/f89c7286-9433-4041-9674-c395f9073d04.gif" width="11" height="1" alt=""></td>
<td>
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/f89c7286-9433-4041-9674-c395f9073d04.gif" width="2" height="1" alt=""></td>
<td>
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/f89c7286-9433-4041-9674-c395f9073d04.gif" width="25" height="1" alt=""></td>
<td>
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/f89c7286-9433-4041-9674-c395f9073d04.gif" width="21" height="1" alt=""></td>
<td>
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/f89c7286-9433-4041-9674-c395f9073d04.gif" width="23" height="1" alt=""></td>
<td>
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/f89c7286-9433-4041-9674-c395f9073d04.gif" width="44" height="1" alt=""></td>
<td>
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/f89c7286-9433-4041-9674-c395f9073d04.gif" width="44" height="1" alt=""></td>
<td>
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/f89c7286-9433-4041-9674-c395f9073d04.gif" width="35" height="1" alt=""></td>
<td>
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/f89c7286-9433-4041-9674-c395f9073d04.gif" width="10" height="1" alt=""></td>
<td>
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/f89c7286-9433-4041-9674-c395f9073d04.gif" width="17" height="1" alt=""></td>
<td>
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/f89c7286-9433-4041-9674-c395f9073d04.gif" width="27" height="1" alt=""></td>
<td>
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/f89c7286-9433-4041-9674-c395f9073d04.gif" width="153" height="1" alt=""></td>
<td>
<img src="https://gallery.mailchimp.com/08b86230a708119be4d19046b/images/f89c7286-9433-4041-9674-c395f9073d04.gif" width="7" height="1" alt=""></td>
<td></td>
</tr>
</table>
<!-- End Save for Web Slices -->
<center>
<br>
<br>
<br>
<br>
<br>
<br>
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="canspamBarWrapper" style="background-color:#FFFFFF; border-top:1px solid #E5E5E5;">
<tr>
<td align="center" valign="top" style="padding-top:20px; padding-bottom:20px;">
<table border="0" cellpadding="0" cellspacing="0" id="canspamBar">
<tr>
<td align="center" valign="top" style="color:#606060; font-family:Helvetica, Arial, sans-serif; font-size:11px; line-height:150%; padding-right:20px; padding-bottom:5px; padding-left:20px; text-align:center;">
This email was sent to *|EMAIL|*
<br>
<em>why did I get this?</em> unsubscribe from this list update subscription preferences
<br>
*|LIST:ADDRESSLINE|*
<br>
<br>
</td>
</tr>
</table>
</td>
</tr>
</table>
<style type="text/css">
#media only screen and (max-width: 480px){
table#canspamBar td{font-size:14px !important;}
table#canspamBar td a{display:block !important; margin-top:10px !important;}
}
</style>
</center></body>
</html>
having an absolute nightmare with my first attempt at creating a HTML Email. I designed this in photoshop and then sliced the document and exported for web. I have played about with the coding to make it work on hotmail, gmail etc which is fine but I can't get it to work on Outlook. What is wrong with my coding that isn't allowing the email to be received nicely everywhere....
Outlook Image
IGS Template Refinish HTML Test
table {border-spacing: 0;}
<img src="http://www.pgautomotive.com/wp-content/uploads/2016/07/IGS-Template-Refinish-HTML-Test_07.gif" width="275" height="50" border="0" alt="" style="display:block;"></a></td>
<td>
<img src="http://www.pgautomotive.com/wp-content/uploads/2016/07/spacer.gif" width="1" height="50" alt="" style="display:block;"></td>
</tr>
<tr>
<td rowspan="6">
<img src="http://www.pgautomotive.com/wp-content/uploads/2016/07/IGS-Template-Refinish-HTML-Test_09.gif" width="275" height="487" alt="" style="display:block;"></td>
<td>
<img src="http://www.pgautomotive.com/wp-content/uploads/2016/07/spacer.gif" width="1" height="236" alt="" style="display:block;"></td>
</tr>
<tr>
<td>
<a href="https://www.linkedin.com/company/pg-automotive" target="- Blank">
<img src="http://www.pgautomotive.com/wp-content/uploads/2016/07/IGS-Template-Refinish-HTML-Test_10.gif" width="222" height="44" border="0" alt="" style="display:block;"></a></td>
<td colspan="2">
<a href="https://www.facebook.com/PGAutomotiveUK/" target="- Blank">
<img src="http://www.pgautomotive.com/wp-content/uploads/2016/07/IGS-Template-Refinish-HTML-Test_11.gif" width="51" height="44" border="0" alt="" style="display:block;"></a></td>
<td>
<a href="https://plus.google.com/106664683502244120701/about" target="- Blank">
<img src="http://www.pgautomotive.com/wp-content/uploads/2016/07/IGS-Template-Refinish-HTML-Test_12.gif" width="63" height="44" border="0" alt="" style="display:block;"></a></td>
<td>
<a href="https://www.linkedin.com/company/pg-automotive" target="- Blank">
<img src="http://www.pgautomotive.com/wp-content/uploads/2016/07/IGS-Template-Refinish-HTML-Test_10-14.gif" width="83" height="44" border="0" alt="" style="display:block;"></a></td>
<td>
<img src="http://www.pgautomotive.com/wp-content/uploads/2016/07/spacer.gif" width="1" height="44" alt="" style="display:block;"></td>
</tr>
<tr>
<td>
<img src="http://www.pgautomotive.com/wp-content/uploads/2016/07/IGS-Template-Refinish-HTML-Test_14.gif" width="222" height="65" alt="" style="display:block;"></td>
<td colspan="2">
<a href="https://twitter.com/pgautomotive">
<img src="http://www.pgautomotive.com/wp-content/uploads/2016/07/IGS-Template-Refinish-HTML-Test_15.gif" width="51" height="65" border="0" alt="" style="display:block;"></a></td>
<td>
<a href="https://www.pinterest.com/pgautomotive/" target="- Blank">
<img src="http://www.pgautomotive.com/wp-content/uploads/2016/07/IGS-Template-Refinish-HTML-Test_16.gif" width="63" height="65" border="0" alt="" style="display:block;"></a></td>
<td>
<a href="https://instagram.com/pgautomotive">
<img src="http://www.pgautomotive.com/wp-content/uploads/2016/07/IGS-Template-Refinish-HTML-Test_17.gif" width="83" height="65" border="0" alt="" style="display:block;"></a></td>
<td>
<img src="http://www.pgautomotive.com/wp-content/uploads/2016/07/spacer.gif" width="1" height="65" alt="" style="display:block;"></td>
</tr>
<tr>
<td colspan="5">
<img src="http://www.pgautomotive.com/wp-content/uploads/2016/07/IGS-Template-Refinish-HTML-Test_18.gif" width="419" height="85" alt="" style="display:block;"></td>
<td>
<img src="http://www.pgautomotive.com/wp-content/uploads/2016/07/spacer.gif" width="1" height="85" alt="" style="display:block;"></td>
</tr>
<tr>
<td colspan="2" rowspan="2">
<img src="http://www.pgautomotive.com/wp-content/uploads/2016/07/IGS-Template-Refinish-HTML-Test_19.gif" width="254" height="57" alt="" style="display:block;"></td>
<td colspan="3">
<a href="mailto:lyndsey#pgautomotive.com" >
<img src="http://www.pgautomotive.com/wp-content/uploads/2016/07/IGS-Template-Refinish-HTML-Test_20.gif" width="165" height="11" border="0" alt="" style="display:block;"></a></td>
<td>
<img src="http://www.pgautomotive.com/wp-content/uploads/2016/07/spacer.gif" width="1" height="11" alt="" style="display:block;"></td>
</tr>
<tr>
<td colspan="3">
<img src="http://www.pgautomotive.com/wp-content/uploads/2016/07/IGS-Template-Refinish-HTML-Test_21.gif" width="165" height="46" alt="" style="display:block;"></td>
<td>
<img src="http://www.pgautomotive.com/wp-content/uploads/2016/07/spacer.gif" width="1" height="46" alt="" style="display:block;"></td>
</tr>
<tr>
<td>
<img src="http://www.pgautomotive.com/wp-content/uploads/2016/07/spacer.gif" width="222" height="1" alt="" style="display:block;"></td>
<td>
<img src="http://www.pgautomotive.com/wp-content/uploads/2016/07/spacer.gif" width="32" height="1" alt="" style="display:block;"></td>
<td>
<img src="http://www.pgautomotive.com/wp-content/uploads/2016/07/spacer.gif" width="19" height="1" alt="" style="display:block;"></td>
<td>
<img src="http://www.pgautomotive.com/wp-content/uploads/2016/07/spacer.gif" width="63" height="1" alt="" style="display:block;"></td>
<td>
<img src="http://www.pgautomotive.com/wp-content/uploads/2016/07/spacer.gif" width="83" height="1" alt="" style="display:block;"></td>
<td>
<img src="http://www.pgautomotive.com/wp-content/uploads/2016/07/spacer.gif" width="275" height="1" alt="" style="display:block;"></td>
<td>
<img src="http://www.pgautomotive.com/wp-content/uploads/2016/07/spacer.gif" width="106" height="1" alt="" style="display:block;"></td>
<td></td>
</tr>
</table>
<!-- End Save for Web Slices -->
</body>
I send newsletters from my Drupal-7 website using Simplenews newsletter module. The newsletters are basic HTML and CSS, and always contain small images, that when added side by side, they create a bigger image.
The newsletter appears fine when you receive it at any browser, but when you receive it on mobile, the images have a big space between them. What should I add in order to fix that?
Here is the code that I already use. It is the table-code generated when you crop the full-image on slices and I made a few css changes:
<table id="Table_01" width="750" height="1636" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="3">
<a href="link" target="_blank">
<img src="test.png" width="750" height="319" alt="" style="display:block;"></a></td>
</tr>
<tr>
<td colspan="3">
<a href="link" target="_blank">
<img src="test.png" width="750" height="336" alt="" style="display:block;"></a></td>
</tr>
<tr>
<td colspan="3">
<a href="link" target="_blank">
<img src="test.png" width="750" height="702" alt="" style="display:block;"></a></td>
</tr>
<tr>
<td colspan="3">
<a href="link" target="_blank">
<img src="test.png" width="750" height="71" alt="" style="display:block;"></a></td>
</tr>
<tr>
<td colspan="3">
<a href="link" target="_blank">
<img src="test.png" width="750" height="46" alt="" style="display:block;"></a></td>
</tr>
<tr>
<td colspan="3">
<img src="test" width="750" height="28" alt="" style="display:block;"></td>
</tr>
<tr>
<td>
<a href="link" target="_blank">
<img src="test.png" width="422" height="44" alt="" style="display:block;"></a></td>
<td>
<a href="link" target="_blank">
<img src="test.png" width="29" height="44" alt="" style="display:block;">
</a>
</td>
<td>
<a href="link" target="_blank">
<img src="test.png" width="299" height="44" alt="" style="display:block;">
</a>
</td>
</tr>
<tr>
<td colspan="3">
<img src="link" width="750" height="90" alt="" style="display:block;"></td>
</tr>
I fixed it! What it needed, is to add some spacer.gif images, whom width adds to the total width if the table created.
For example:
<tr>
<td>
<img src="images/spacer.gif" alt="" width="272" height="1">
</td>
<td>
<img src="images/spacer.gif" alt="" width="12" height="1">
</td>
<td>
<img src="images/spacer.gif" alt="" width="6" height="1">
</td>
<td>
<img src="images/spacer.gif" alt="" width="233" height="1">
</td>
<td>
<img src="images/spacer.gif" alt="" width="37" height="1">
</td>
<td>
<img src="images/spacer.gif" alt="" width="35" height="1">
</td>
<td>
<img src="images/spacer.gif" alt="" width="12" height="1">
</td>
<td>
<img src="images/spacer.gif" alt="" width="67" height="1">
</td>
<td>
<img src="images/spacer.gif" alt="" width="286" height="1">
</td>
I have been making html emails for a little while via slicing and incur different problems all the time. I can't seem to get my email to align properly in outlook 2010, neither can I get rid of these white spaces. I have inserted the other little fixes before and it hasn't worked for me (style="display:block" and/or a border="0"). I am also sure that I have been entering it in the right place.
Any suggestions on what I can do to fix this? Code is below:
Thank you for your time.
Zolas
<title>Scarlet Email Template flat</title>
<style type="text/css">
body, td, th {
font-size: 13px;
color: #333;
}
</style>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (Scarlet Email Template flat.psd) -->
<table width="700" height="934" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01">
<tr>
<td colspan="10">
<img src="images/sc_01.jpg" width="700" height="157" alt="">
</td>
</tr>
<tr>
<td>
<img src="images/sc_02.jpg" width="72" height="39" alt="">
</td>
<td>
<img src="images/sc_03.jpg" width="124" height="39" alt="">
</td>
<td colspan="3">
<img src="images/sc_04.jpg" width="159" height="39" alt="">
</td>
<td colspan="2">
<img src="images/sc_05.jpg" width="104" height="39" alt="">
</td>
<td>
<img src="images/sc_06.jpg" width="164" height="39" alt="">
</td>
<td colspan="2">
<img src="images/sc_07.jpg" width="77" height="39" alt="">
</td>
</tr>
<tr>
<td>
<img src="images/sc_08.jpg" width="72" height="196" alt="">
</td>
<td colspan="7">
<table width="500" border="0" align="center" cellpadding="4">
<tr>
<td align="center"><strong>Dear Alexia and Team,</strong>
<br>My name is Ilia Zolas and I provide an outsourced marketing solution to start-ups and small businesses. By implementing the activities I have described below, I believe that I can add value to your business and ultimately increase sales. Please feel free to reply to this email or call me (<strong>0716854983</strong>) should you be interested.
<br> <strong>Sincerely ,<br>
Ilia Zolas - BSc in International Hospitality Management, Major in Marketing</strong>
</td>
</tr>
</table>
</td>
<td>
<img src="images/sc_10.jpg" width="27" height="196" alt="">
</td>
<td>
<img src="images/sc_11.jpg" width="50" height="196" alt="">
</td>
</tr>
<tr>
<td>
<img src="images/sc_12.jpg" width="72" height="49" alt="">
</td>
<td colspan="2">
<img src="images/sc_13.jpg" width="210" height="49" alt="">
</td>
<td colspan="6">
<img src="images/sc_14.jpg" width="368" height="49" alt="">
</td>
<td>
<img src="images/sc_15.jpg" width="50" height="49" alt="">
</td>
</tr>
<tr>
<td>
<img src="images/sc_16.jpg" width="72" height="177" alt="">
</td>
<td colspan="2">
<img src="images/sc_17.jpg" width="210" height="177" alt="">
</td>
<td colspan="6">
<table width="350" border="0" align="center" cellpadding="4">
<tr>
<td><strong>Digital Marketing</strong>
<br>Scarlet needs a website that encompasses the brand's values, has ideal functionality and incurs high volumes of traffic. I can achieve this by creating the desired website and attracting the right kind of traffic with tools such as Adwords and Google Analytic.</td>
</tr>
</table>
</td>
<td>
<img src="images/sc_19.jpg" width="50" height="177" alt="">
</td>
</tr>
<tr>
<td>
<img src="images/sc_20.jpg" width="72" height="45" alt="">
</td>
<td colspan="2">
<img src="images/sc_21.jpg" width="210" height="45" alt="">
</td>
<td colspan="6">
<img src="images/sc_22.jpg" width="368" height="45" alt="">
</td>
<td>
<img src="images/sc_23.jpg" width="50" height="45" alt="">
</td>
</tr>
<tr>
<td>
<img src="images/sc_24.jpg" width="72" height="177" alt="">
</td>
<td colspan="2">
<img src="images/sc_25.jpg" width="210" height="177" alt="">
</td>
<td colspan="6">
<table width="350" border="0" align="center" cellpadding="4">
<tr>
<td><strong>Social Media & Content Creation </strong>
<br>Populating your Social Media with a variety of content is key to convincing customers that your product is the right choice. To achieve this, I need to setup a variety of Social Platforms and populate them with pictures, videos and other types of content based on your product.</td>
</tr>
</table>
</td>
<td>
<img src="images/sc_27.jpg" width="50" height="177" alt="">
</td>
</tr>
<tr>
<td>
<img src="images/sc_28.jpg" width="72" height="62" alt="">
</td>
<td colspan="2">
<img src="images/sc_29.jpg" width="210" height="62" alt="">
</td>
<td>
<img src="images/sc_30.jpg" width="54" height="62" alt="">
</td>
<td colspan="2">
<img src="images/sc_31.jpg" width="34" height="62" alt="">
</td>
<td colspan="3">
<img src="images/sc_32.jpg" width="280" height="62" alt="">
</td>
<td>
<img src="images/sc_33.jpg" width="50" height="62" alt="">
</td>
</tr>
<tr>
<td colspan="10">
<img src="images/sc_34.jpg" width="700" height="31" alt="">
</td>
</tr>
<tr>
<td>
<img src="images/spacer.gif" width="72" height="1" alt="">
</td>
<td>
<img src="images/spacer.gif" width="124" height="1" alt="">
</td>
<td>
<img src="images/spacer.gif" width="86" height="1" alt="">
</td>
<td>
<img src="images/spacer.gif" width="54" height="1" alt="">
</td>
<td>
<img src="images/spacer.gif" width="19" height="1" alt="">
</td>
<td>
<img src="images/spacer.gif" width="15" height="1" alt="">
</td>
<td>
<img src="images/spacer.gif" width="89" height="1" alt="">
</td>
<td>
<img src="images/spacer.gif" width="164" height="1" alt="">
</td>
<td>
<img src="images/spacer.gif" width="27" height="1" alt="">
</td>
<td>
<img src="images/spacer.gif" width="50" height="1" alt="">
</td>
</tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>## Heading ##
You need style="margin: 0; border: 0; padding: 0; display: block;" on all images. Also, you can't start colspans with the first row being spanned, Outlook doesn't know how to handle the widths. See here for more information.
Beyond that, you should NEVER use slices to create entire html emails. It is really bad practice, as:
Images do not load by default in most email clients
Some spam filters will trigger as the ratio of text to image is too low
Long download times resulting in poor usability
You'll find a bunch of information on html email best practices here