I recently made an email signature using photoshop (slicing method), it's working fine on Gmail and even in my server (Roundcube) except for outlook, it's showing a white space between every slice..
how can I fix that please, it's been a week now since I'm trying to fix this..
I need your help...
some people suggested that I need to remove white space between every td
I also tried the display: block;
tried even to make my signature smaller
tried changing the background
and still nothing.
I really need ur help with this..
I attached down below, the HTML code I'm using for my signature.
thanks in advance.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style media="screen" type="text/css">
td {line-height:0; font-size: 0.0em; }
img { display: block; float: left; padding: 0; align: absbottom; align: texttop; }
</style>
</head>
<!-- Paste Code Under This Line
_________________________________________________________________________________ -->
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (signature temlate testing.psd) -->
<table id="Tableau_01" width="701" height="234" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2" rowspan="2">
<img src="https://i.postimg.cc/Mp629Dz4/mag-01.png" width="262" height="100" alt="" border="0" style="display:block;"></td>
<td colspan="2" rowspan="2">
<img src="https://i.postimg.cc/g07Ckb3F/mag-02.png" width="243" height="100" alt="" border="0" style="display:block;"></td>
<td colspan="2">
<img src="https://i.postimg.cc/yYKwNP3d/mag-03.png" width="195" height="39" alt="" border="0" style="display:block;"></td>
<td>
<img src="spacer.gif" width="1" height="39" alt="" border="0" style="display:block;"></td>
</tr>
<tr>
<td colspan="2" rowspan="2">
<img src="https://i.postimg.cc/Zq0kS5Bx/mag-04.png" width="195" height="80" alt="" border="0" style="display:block;"></td>
<td>
<img src="spacer.gif" width="1" height="61" alt="" border="0" style="display:block;"></td>
</tr>
<tr>
<td rowspan="7">
<img src="https://i.postimg.cc/7YNjJ2SN/mag-05.png" width="261" height="133" alt="" border="0" style="display:block;"></td>
<td colspan="3" rowspan="2">
<img src="https://i.postimg.cc/vB6p42v1/mag-06.png" width="244" height="20" alt="" border="0" style="display:block;"></td>
<td>
<img src="spacer.gif" width="1" height="19" alt="" border="0" style="display:block;"></td>
</tr>
<tr>
<td>
<img src="https://i.postimg.cc/gjF18yMg/mag-07.png" width="94" height="1" alt="" border="0" style="display:block;"></td>
<td rowspan="4">
<img src="https://i.postimg.cc/zvC6jL68/mag-08.png" width="101" height="52" alt="" border="0" style="display:block;"></td>
<td>
<img src="spacer.gif" width="1" height="1" alt="" border="0" style="display:block;"></td>
</tr>
<tr>
<td colspan="2">
<img src="https://i.postimg.cc/wxLCHPvZ/mag-09.png" width="241" height="6" alt="" border="0" style="display:block;"></td>
<td colspan="2" rowspan="3">
<img src="https://i.postimg.cc/mg2JYgwW/mag-10.png" width="97" height="51" alt="" border="0" style="display:block;"></td>
<td>
<img src="spacer.gif" width="1" height="6" alt="" border="0" style="display:block;"></td>
</tr>
<tr>
<td colspan="2">
<img src="https://i.postimg.cc/x1x7tVxJ/mag-11.png" width="241" height="24" alt="" border="0" style="display:block;"></td>
<td>
<img src="spacer.gif" width="1" height="24" alt="" border="0" style="display:block;"></td>
</tr>
<tr>
<td colspan="2" rowspan="2">
<img src="https://i.postimg.cc/VNJhhZp7/mag-12.png" width="241" height="33" alt="" border="0" style="display:block;"></td>
<td>
<img src="spacer.gif" width="1" height="21" alt="" border="0" style="display:block;"></td>
</tr>
<tr>
<td>
<img src="https://i.postimg.cc/43j0RbTX/mag-13.png" width="3" height="12" alt="" border="0" style="display:block;"></td>
<td colspan="2" rowspan="2">
<img src="https://i.postimg.cc/C1DQhBFk/mag-14.png" width="195" height="62" alt="" border="0" style="display:block;"></td>
<td>
<img src="spacer.gif" width="1" height="12" alt="" border="0" style="display:block;"></td>
</tr>
<tr>
<td colspan="3">
<img src="https://i.postimg.cc/j2bkLx59/mag-15.png" width="244" height="50" alt="" border="0" style="display:block;"></td>
<td>
<img src="spacer.gif" width="1" height="50" alt="" border="0" style="display:block;"></td>
</tr>
<tr>
<td>
<img src="spacer.gif" width="261" height="1" alt="" border="0" style="display:block;"></td>
<td>
<img src="spacer.gif" width="1" height="1" alt="" border="0" style="display:block;"></td>
<td>
<img src="spacer.gif" width="240" height="1" alt="" border="0" style="display:block;"></td>
<td>
<img src="spacer.gif" width="3" height="1" alt="" border="0" style="display:block;"></td>
<td>
<img src="spacer.gif" width="94" height="1" alt="" border="0" style="display:block;"></td>
<td>
<img src="spacer.gif" width="101" height="1" alt="" border="0" style="display:block;"></td>
<td></td>
</tr>
</table>
<!-- End Save for Web Slices -->
</body>
<!-- Keep Pasted Code Above This Line!
_________________________________________________________________________________ -->
</html>
Related
I have written an email template, its only a set of images with hyperlinks. Its working good on my browser, but when I send it through email, it gets broken due to unnecessary padding between tds.
This is how it should render. But what I see:
And when I inspected it:
You see the unnecessary padding? Here's the code:
<html><head>
<title>Email Template</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (594bfefd1385a.jpeg) -->
<table id="Table_01" width="1004" height="577" border="0" cellpadding="0" cellspacing="0">
<tbody><tr>
<td rowspan="2">
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68d7e313.gif" width="231" height="173" alt=""></td>
<td colspan="8" rowspan="5">
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68dbb799.gif" width="411" height="445" alt=""></td>
<td colspan="5">
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68db1f3f.gif" width="361" height="163" alt=""></td>
<td>
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="1" height="163" alt=""></td>
</tr>
<tr>
<td colspan="5" rowspan="2">
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68dd8c60.gif" width="361" height="105" alt=""></td>
<td>
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="1" height="10" alt=""></td>
</tr>
<tr>
<td rowspan="8">
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68de43fb.gif" width="231" height="403" alt=""></td>
<td>
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="1" height="95" alt=""></td>
</tr>
<tr>
<td colspan="3" rowspan="2">
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68e02a9f.gif" width="164" height="177" alt=""></td>
<td>
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68e23617.gif" width="72" height="73" alt=""></td>
<td rowspan="5">
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68e25d27.gif" width="125" height="244" alt=""></td>
<td>
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="1" height="73" alt=""></td>
</tr>
<tr>
<td rowspan="4">
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68e4689f.gif" width="72" height="171" alt=""></td>
<td>
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="1" height="104" alt=""></td>
</tr>
<tr>
<td rowspan="5">
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68e47c27.gif" width="42" height="131" alt=""></td>
<td rowspan="2">
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68e6685e.png" width="51" height="52" alt=""></td>
<td colspan="5">
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68e677fe.gif" width="281" height="2" alt=""></td>
<td colspan="2" rowspan="2">
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68e6685e.png" width="51" height="52" alt=""></td>
<td colspan="2" rowspan="3">
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68e877be.gif" width="150" height="67" alt=""></td>
<td>
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="1" height="2" alt=""></td>
</tr>
<tr>
<td rowspan="4">
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68ea96be.gif" width="89" height="129" alt=""></td>
<td>
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68eab5fe.gif" width="51" height="50" alt=""></td>
<td rowspan="4">
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68ec9295.gif" width="15" height="129" alt=""></td>
<td>
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68ecb9a6.gif" width="50" height="50" alt=""></td>
<td rowspan="4">
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68eeadad.gif" width="76" height="129" alt=""></td>
<td>
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="1" height="50" alt=""></td>
</tr>
<tr>
<td rowspan="3">
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68eebd4d.gif" width="51" height="79" alt=""></td>
<td rowspan="3">
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68f15f75.gif" width="51" height="79" alt=""></td>
<td rowspan="3">
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68f16f15.gif" width="50" height="79" alt=""></td>
<td colspan="2" rowspan="3">
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68f37e75.gif" width="51" height="79" alt=""></td>
<td>
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="1" height="15" alt=""></td>
</tr>
<tr>
<td rowspan="2">
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68f36aec.gif" width="62" height="64" alt=""></td>
<td colspan="3">
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68f589ec.gif" width="285" height="25" alt=""></td>
<td>
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="1" height="25" alt=""></td>
</tr>
<tr>
<td colspan="3">
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68f5a15d.gif" width="285" height="39" alt=""></td>
<td>
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="1" height="39" alt=""></td>
</tr>
<tr>
<td>
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="231" height="1" alt=""></td>
<td>
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="42" height="1" alt=""></td>
<td>
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="51" height="1" alt=""></td>
<td>
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="89" height="1" alt=""></td>
<td>
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="51" height="1" alt=""></td>
<td>
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="15" height="1" alt=""></td>
<td>
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="50" height="1" alt=""></td>
<td>
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="76" height="1" alt=""></td>
<td>
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="37" height="1" alt=""></td>
<td>
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="14" height="1" alt=""></td>
<td>
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="62" height="1" alt=""></td>
<td>
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="88" height="1" alt=""></td>
<td>
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="72" height="1" alt=""></td>
<td>
<img src="http://thetwistedbit.net/imagehosting/5360/594eb68fb3b0a.gif" width="125" height="1" alt=""></td>
<td></td>
</tr>
</tbody></table>
<!-- End Save for Web Slices -->
</body></html>
Please help, Thanks in advance.
I take it this is the first email you have built? It is not padding, its the display block that is missing from the images. Use the below code for all images in the html:
style="display:block;" hspace="0" vspace="0" alt="" border="0"
Note: Since you have so many colspan and rowspan the template might not work properly in some email clients. The above code will ensure all your images are sitting flush against each other.
A word of advice not to be taken lightly:
Never do Save for web from Photoshop. It creates table that is not fixable most of the time.
Don't use col span. Some email email clients don't like it.
Only image emails will have delivery problem, general rule is to have 70/30 (some day 60/40) to get best results.
Use media queries or Gmail fix or your emails will look really messed up in Gmail apps.
Let me know if the above fix works.
Cheers
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>
I'm trying to create a HTML document which is to be sent out as a newsletter, but unfortunately it's not showing correctly in Gmail.
For some reason I am getting spacing issues above and below images which are hyperlinked. Like this:
http://i.imgur.com/hesFibq.png
I have tried adding:
style="border-spacing:0;"
to my table as seen elsewhere, as well as the below to all images:
style="display:block;"
Any ideas?
Edit: here's the html as it stands:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<head>
<title>LCTSA</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table id="Table_01" width="701" height="375" border="0" cellpadding="0" cellspacing="0" style="border-spacing:0;">
<tr>
<td colspan="3" rowspan="2">
<img src="http://www.morley.leeds.sch.uk/user/74/183839.png" width="473" height="279" alt="" style="display:block;"></td>
<td>
<a href="mailto:example#co.uk" style="display:block;"><img src="http://www.morley.leeds.sch.uk/user/74/183840.png" width="227" height="145" alt=""
style="display:block;"></td></a>
<td>
<img src="http://www.morley.leeds.sch.uk/user/74/183848.gif" width="1" height="145" alt="" style="display:block;"></td>
</tr>
<tr>
<td rowspan="3">
<img src="http://www.morley.leeds.sch.uk/user/74/183841.png" width="227" height="179" alt="" style="display:block;"></td>
<td>
<img src="http://www.morley.leeds.sch.uk/user/74/183848.gif" width="1" height="134" alt="" style="display:block;"></td>
</tr>
<tr>
<td rowspan="4">
<img src="http://www.morley.leeds.sch.uk/user/74/183842.png" width="29" height="96" alt="" style="display:block;"></td>
<td>
<a href="mailto:example#co.uk" style="display:block;"><img src="http://www.morley.leeds.sch.uk/user/74/183843.png" width="176" height="14" alt=""
style="display:block;"></td></a>
<td rowspan="4">
<img src="http://www.morley.leeds.sch.uk/user/74/183844.png" width="268" height="96" alt="" style="display:block;"></td>
<td>
<img src="http://www.morley.leeds.sch.uk/user/74/183848.gif" width="1" height="14" alt="" style="display:block;"></td>
</tr>
<tr>
<td rowspan="3">
<img src="http://www.morley.leeds.sch.uk/user/74/183845.png" width="176" height="82" alt="" style="display:block;"></td>
<td>
<img src="http://www.morley.leeds.sch.uk/user/74/183848.gif" width="1" height="31" alt="" style="display:block;"></td>
</tr>
<tr>
<td>
<a href="http://www.google.co.uk" target="_blank" style="display:block;"><img src="http://www.morley.leeds.sch.uk/user/74/183846.png" width="227" height="24" alt=""
style="display:block;"></td></a>
<td>
<img src="http://www.morley.leeds.sch.uk/user/74/183848.gif" width="1" height="24" alt="" style="display:block;"></td>
</tr>
<tr>
<td>
<img src="http://www.morley.leeds.sch.uk/user/74/183847.png" width="227" height="27" alt="" style="display:block;"></td>
<td>
<img src="http://www.morley.leeds.sch.uk/user/74/183848.gif" width="1" height="27" alt="" style="display:block;"></td>
</tr>
</table>
</body>
</html>
You need to make the <a> display: block.
I made a webpage with photoshop, sliced it & saved for web. It looks fine in Chrome, Firefox, Opera & Safari, but when you view it in IE 10 it goes all weird... Does anyone know of a fix for this?
IE 10:
http://i.stack.imgur.com/FsiIX.jpg
Chrome, Safari, Firefox, Opera:
http://i.stack.imgur.com/m7dVq.jpg
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Online Support</title>
<style type="text/css">
div {
height: 400px;
width: 592px;
background: #ffffff;
margin: auto;
}
p {
width: 60%;
margin: auto;
font: 14px/1.5 Helvetica, sans-serif;
}}
.auto-style3 {
border-width: 0px;
}
</style>
</head>
<body style="margin: 0; background-image: url('images/About%20Us%20Background.jpg')">
<div id="position">
<table id="Table_01" width="593" height="763" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="11">
<img src="images/Online-Support_01.gif" width="592" height="89" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="89" alt=""></td>
</tr>
<tr>
<td colspan="2" rowspan="3">
<a href="Index.html">
<img src="images/Online-Support_02.gif" width="88" height="46" alt="" class="auto-style3"></a></td>
<td rowspan="3">
<a href="About%20Us.html">
<img src="images/Online-Support_03.gif" width="80" height="46" alt="" class="auto-style3"></a></td>
<td colspan="2" rowspan="3">
<a href="Online%20Support.html">
<img src="images/Online-Support_04.gif" width="128" height="46" alt="" class="auto-style3"></a></td>
<td rowspan="3">
<a href="Testimonials.html">
<img src="images/Online-Support_05.gif" width="106" height="46" alt="" class="auto-style3"></a></td>
<td rowspan="3">
<a href="Contact%20%20Us.html">
<img src="images/Online-Support_06.gif" width="95" height="46" alt="" class="auto-style3"></a></td>
<td colspan="4">
<img src="images/Online-Support_07.gif" width="95" height="7" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="7" alt=""></td>
</tr>
<tr>
<td rowspan="7">
<img src="images/Online-Support_08.gif" width="18" height="666" alt=""></td>
<td>
<a href="https://www.facebook.com/pages/Always-Connected-Ltd/373671419315390">
<img src="images/Online-Support_09.gif" width="33" height="33" alt="" class="auto-style3"></a></td>
<td>
<a href="https://twitter.com/Always_Connect">
<img src="images/Online-Support_10.gif" width="33" height="33" alt="" class="auto-style3"></a></td>
<td rowspan="7">
<img src="images/Online-Support_11.gif" width="11" height="666" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="33" alt=""></td>
</tr>
<tr>
<td colspan="2" rowspan="6">
<img src="images/Online-Support_12.gif" width="66" height="633" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="6" alt=""></td>
</tr>
<tr>
<td colspan="7">
<img src="images/Online-Support_13.gif" width="497" height="206" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="206" alt=""></td>
</tr>
<tr>
<td rowspan="4">
<img src="images/Online-Support_14.gif" width="12" height="421" alt=""></td>
<td colspan="3">
<a href="http://www.teamviewer.com/link/?url=505374&id=1585160200">
<img src="images/Online-Support_15.gif" width="200" height="125" alt="" class="auto-style3"></a></td>
<td colspan="3" rowspan="4">
<img src="images/Online-Support_16.gif" width="285" height="421" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="125" alt=""></td>
</tr>
<tr>
<td colspan="3">
<img src="images/Online-Support_17.gif" width="200" height="17" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="17" alt=""></td>
</tr>
<tr>
<td colspan="3">
<a href="http://download.teamviewer.com/download/TeamViewer.dmg">
<img src="images/Online-Support_18.gif" width="200" height="125" alt="" class="auto-style3"></a></td>
<td>
<img src="images/spacer.gif" width="1" height="125" alt=""></td>
</tr>
<tr>
<td colspan="3">
<img src="images/Online-Support_19.gif" width="200" height="154" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="154" alt=""></td>
</tr>
<tr>
<td>
<img src="images/spacer.gif" width="12" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="76" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="80" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="44" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="84" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="106" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="95" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="18" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="33" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="33" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="11" height="1" alt=""></td>
<td></td>
</tr>
</table>
</div>
</body>
</html>
I think you need to set <a> or <img> border none, use this code:
a, img{
border:none;
}
I don't have IE10 for test
you need to add
img {border:0; ouline:0; padding:0; margin:0}
Sorry I'm completely new to this.
Ive designed a website in photoshop, and exported it 'for use with web and devices', (HTML/IMAGES). And I now want to be able to write and add content over a specific 'content slice' (images/GSGOPSD_13.gif (900px X 756px))
Here is the code i have from photoshop:
<html>
<head>
<title>Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<center>
<body bgcolor="#2c2c2c" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (GSGOPSD.psd) -->
<table id="Table_01" width="1051" height="1235" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="8">
<img src="images/GSGOPSD_01.gif" width="1050" height="359" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="359" alt=""></td>
</tr>
<tr>
<td colspan="5">
<img src="images/GSGOPSD_02.gif" width="92" height="2" alt=""></td>
<td rowspan="3">
<img src="images/GSGOPSD_03.gif" alt="" name="Twittr" width="55" height="62" id="Twittr"></td>
<td colspan="2" rowspan="4">
<img src="images/GSGOPSD_04.gif" width="903" height="119" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="2" alt=""></td>
</tr>
<tr>
<td rowspan="5">
<img src="images/GSGOPSD_05.gif" width="13" height="873" alt=""></td>
<td colspan="2">
<img src="images/GSGOPSD_06.gif" alt="" name="Fbook" width="61" height="59" id="Fbook"></td>
<td colspan="2" rowspan="3">
<img src="images/GSGOPSD_07.gif" width="18" height="117" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="59" alt=""></td>
</tr>
<tr>
<td colspan="2" rowspan="2">
<img src="images/GSGOPSD_08.gif" width="61" height="58" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt=""></td>
</tr>
<tr>
<td>
<img src="images/GSGOPSD_09.gif" width="55" height="57" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="57" alt=""></td>
</tr>
<tr>
<td>
<img src="images/GSGOPSD_10.gif" alt="" name="thumdown" width="60" height="59" id="thumdown"></td>
<td colspan="2" rowspan="2">
<img src="images/GSGOPSD_11.gif" width="16" height="756" alt=""></td>
<td colspan="3">
<img src="images/GSGOPSD_12.gif" alt="" name="thumup" width="61" height="59" id="thumup"></td>
<td rowspan="2">
<img src="images/GSGOPSD_13.gif" width="900" height="756" alt=""></td>
<td> //------------I WANT TO ADD CONTENT OVER THIS IMAGE.
<img src="images/spacer.gif" width="1" height="59" alt=""></td>
</tr>
<tr>
<td>
<img src="images/GSGOPSD_14.gif" width="60" height="697" alt=""></td>
<td colspan="3">
<img src="images/GSGOPSD_15.gif" width="61" height="697" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="697" alt=""></td>
</tr>
<tr>
<td>
<img src="images/spacer.gif" width="13" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="60" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="15" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="3" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="55" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="3" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="900" height="1" alt=""></td>
<td></td>
</tr>
</table>
<!-- End Save for Web Slices -->
</body>
</center>
</html>
I thought that there would be a tut for this somewhere, and it would be a pretty simple thing, thanks for any help!
try going through this tutorial as I think it is what you are trying to aim for. You can relate it to your .psd along the way
You need to remove the image and then you will be able of insert content in the place where the image was.
BUT I would not recommend use tables for designing your layout and also do not use fixed sizes for widht/height. This should be achieved with CSS