I have a html page, the background is black. The main interface is kind of red. Please see the image.
Please ignore the asian fonts if you don't know(embeded in the images). You can see there are a lot of black parts under red part also on the left and right.
I really don't know why it caused it.
The entire html code:
<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title><style type="text/css">
</style>
</head>
<body bgcolor="#000000">
<!-- ImageReady Slices () -->
<div align="center">
<table border="0" cellpadding="0" cellspacing="0" width="815">
<tbody><tr>
<td> <img src="http://img33.imageshack.us/img33/9060/spacerusa.gif" alt="" height="1" width="349"></td>
<td> <img src="http://img33.imageshack.us/img33/9060/spacerusa.gif" alt="" height="1" width="77"></td>
<td> <img src="http://img33.imageshack.us/img33/9060/spacerusa.gif" alt="" height="1" width="56"></td>
<td> <img src="http://img33.imageshack.us/img33/9060/spacerusa.gif" alt="" height="1" width="106"></td>
<td> <img src="http://img33.imageshack.us/img33/9060/spacerusa.gif" alt="" height="1" width="227"></td>
<td></td>
</tr>
<tr>
<td colspan="5" height="116"> <img src="http://img543.imageshack.us/img543/6433/test01.gif" alt="" usemap="#Map4" border="0" height="116" width="815"></td>
<td> <img src="http://img33.imageshack.us/img33/9060/spacerusa.gif" alt="" height="116" width="1"></td>
</tr>
<tr>
<td colspan="2" align="left" bgcolor="#b52904" valign="top">
<div align="center">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" height="140" width="400">
<param name="movie" value="Artwork/mainalbum.swf">
<param name="quality" value="high">
<embed src="Artwork/main.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" height="140" width="400"></object>
</div></td>
<td colspan="3" rowspan="2"> <img src="http://img267.imageshack.us/img267/7442/test03.gif" alt="" usemap="#Map3" border="0" height="217" width="389"></td>
<td> <img src="http://img33.imageshack.us/img33/9060/spacerusa.gif" alt="" height="140" width="1"></td>
</tr>
<tr>
<td colspan="2" rowspan="2"> <img src="http://img594.imageshack.us/img594/2240/test04.gif" alt="" height="109" width="426"></td>
<td height="77"> <img src="http://img33.imageshack.us/img33/9060/spacerusa.gif" alt="" height="77" width="1"></td>
</tr>
<tr>
<td colspan="2" height="32"> <img src="http://img210.imageshack.us/img210/579/test05.gif" alt="" usemap="#Map2" border="0" height="32" width="162"></td>
<td rowspan="3" align="left" bgcolor="#b52904" valign="top"><p><font color="#ffffff"><strong>News:</strong></font></p>
<p>- Church life albums </p>
<p>Sermon</p>
</td>
<td> <img src="http://img33.imageshack.us/img33/9060/spacerusa.gif" alt="" height="32" width="1"></td>
</tr>
<tr>
<td rowspan="3" bgcolor="#b52904" valign="top"> <img src="http://img820.imageshack.us/img820/9735/test07.gif" alt="" height="135" width="349"></td>
<td colspan="2" align="left" valign="top"> <img src="http://img839.imageshack.us/img839/4696/test08.gif" alt="" usemap="#Map" border="0" height="53" width="133"></td>
<td rowspan="3" bgcolor="#b52904"> </td>
<td> <img src="http://img33.imageshack.us/img33/9060/spacerusa.gif" alt="" height="53" width="1"></td>
</tr>
<tr>
<td colspan="2" rowspan="2" bgcolor="#b52904"><img src="http://img7.imageshack.us/img7/743/test10w.gif" height="82" width="133">
</td>
<td> <img src="http://img33.imageshack.us/img33/9060/spacerusa.gif" alt="" height="80" width="1"></td>
</tr>
<tr>
<td height="2"> <img src="http://img594.imageshack.us/img594/6978/test11m.gif" alt="" height="2" width="227"></td>
<td> <img src="http://img33.imageshack.us/img33/9060/spacerusa.gif" alt="" height="2" width="1"></td>
</tr>
</tbody></table>
<!-- End ImageReady Slices -->
</div>
</body>
</html>
Thanks.
Remove bgcolor="#000000" on <body> to get rid of the black background.
To change the table width, set it to 100%:
<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title><style type="text/css">
</style>
</head>
<body bgcolor="#000000">
<!-- ImageReady Slices () -->
<div align="center">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td> <img src="http://img33.imageshack.us/img33/9060/spacerusa.gif" alt="" height="1" width="349"></td>
<td> <img src="http://img33.imageshack.us/img33/9060/spacerusa.gif" alt="" height="1" width="77"></td>
<td> <img src="http://img33.imageshack.us/img33/9060/spacerusa.gif" alt="" height="1" width="56"></td>
<td> <img src="http://img33.imageshack.us/img33/9060/spacerusa.gif" alt="" height="1" width="106"></td>
<td> <img src="http://img33.imageshack.us/img33/9060/spacerusa.gif" alt="" height="1" width="227"></td>
<td></td>
</tr>
<tr>
<td colspan="5" height="116"> <img src="http://img543.imageshack.us/img543/6433/test01.gif" alt="" usemap="#Map4" border="0" height="116" width="815"></td>
<td> <img src="http://img33.imageshack.us/img33/9060/spacerusa.gif" alt="" height="116" width="1"></td>
</tr>
<tr>
<td colspan="2" align="left" bgcolor="#b52904" valign="top">
<div align="center">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" height="140" width="400">
<param name="movie" value="Artwork/mainalbum.swf">
<param name="quality" value="high">
<embed src="Artwork/main.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" height="140" width="400"></object>
</div></td>
<td colspan="3" rowspan="2"> <img src="http://img267.imageshack.us/img267/7442/test03.gif" alt="" usemap="#Map3" border="0" height="217" width="389"></td>
<td> <img src="http://img33.imageshack.us/img33/9060/spacerusa.gif" alt="" height="140" width="1"></td>
</tr>
<tr>
<td colspan="2" rowspan="2"> <img src="http://img594.imageshack.us/img594/2240/test04.gif" alt="" height="109" width="426"></td>
<td height="77"> <img src="http://img33.imageshack.us/img33/9060/spacerusa.gif" alt="" height="77" width="1"></td>
</tr>
<tr>
<td colspan="2" height="32"> <img src="http://img210.imageshack.us/img210/579/test05.gif" alt="" usemap="#Map2" border="0" height="32" width="162"></td>
<td rowspan="3" align="left" bgcolor="#b52904" valign="top"><p><font color="#ffffff"><strong>News:</strong></font></p>
<p>- Church life albums </p>
<p>Sermon</p>
</td>
<td> <img src="http://img33.imageshack.us/img33/9060/spacerusa.gif" alt="" height="32" width="1"></td>
</tr>
<tr>
<td rowspan="3" bgcolor="#b52904" valign="top"> <img src="http://img820.imageshack.us/img820/9735/test07.gif" alt="" height="135" width="349"></td>
<td colspan="2" align="left" valign="top"> <img src="http://img839.imageshack.us/img839/4696/test08.gif" alt="" usemap="#Map" border="0" height="53" width="133"></td>
<td rowspan="3" bgcolor="#b52904"> </td>
<td> <img src="http://img33.imageshack.us/img33/9060/spacerusa.gif" alt="" height="53" width="1"></td>
</tr>
<tr>
<td colspan="2" rowspan="2" bgcolor="#b52904"><img src="http://img7.imageshack.us/img7/743/test10w.gif" height="82" width="133">
</td>
<td> <img src="http://img33.imageshack.us/img33/9060/spacerusa.gif" alt="" height="80" width="1"></td>
</tr>
<tr>
<td height="2"> <img src="http://img594.imageshack.us/img594/6978/test11m.gif" alt="" height="2" width="227"></td>
<td> <img src="http://img33.imageshack.us/img33/9060/spacerusa.gif" alt="" height="2" width="1"></td>
</tr>
</tbody></table>
<!-- End ImageReady Slices -->
</div>
</body>
</html>
Related
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>
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>
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.
This question already has answers here:
White space at bottom of anchor tag
(5 answers)
How to avoid White line between img and td bottom?
(1 answer)
Closed 8 years ago.
I have been working on a simple html landing page and I can't seem to remove the white spacing mid way through the page that my image links are causing. Does anyone have a simple fix for this? Thank you.
Here is a link to the page:
https://www.facebook.com/RevivalCabs/app_190322544333196
Here is my HTML:
<body marginwidth="0" marginheight="0" bgcolor="#FFFFFF" topmargin="0" leftmargin="0">
<table id="Table_01" height="792" width="814" cellspacing="0" cellpadding="0" border="0" valign="top">
<tbody>
<tr>
<td valign="top" colspan="8">
<img height="369" width="814" border="0" alt="" src="http://i212.photobucket.com /albums/cc139/takeonecar/Kolossal_MGMT_TOP.jpg">
</td>
</tr>
<tr>
<td valign="top">
<img height="35" width="84" border="0" alt="" src="http://i212.photobucket.com/albums/cc139/takeonecar/Kolossal_MGMT_MID1F.jpg">
</td>
<td valign="top">
<a target="blank" href="https://www.facebook.com/counttofour" >
<img height="35" width="85" border="0" alt="" src="http://i212.photobucket.com/albums/cc139/takeonecar/Kolossal_MGMT_MID2.jpg">
</a>
</td>
<td valign="top">
<a target="blank" href="https://twitter.com/CountToFour">
<img height="35" width="85" border="0" alt="" src="http://i212.photobucket.com/albums/cc139/takeonecar/Kolossal_MGMT_MID3F.jpg">
</a>
</td>
<td valign="top">
<a target="blank" href="https://www.facebook.com/counttofour">
<img height="35" width="127" border="0" alt="" src="http://i212.photobucket.com/albums/cc139/takeonecar/Kolossal_MGMT_MID4.jpg">
</a>
</td>
<td valign="top">
<img height="35" width="90" border="0" alt="" src="http://i212.photobucket.com/albums/cc139/takeonecar/Kolossal_MGMT_MID5F.jpg">
</td>
<td valign="top">
<a target="blank" href="https://www.facebook.com/BATTLEGHOST">
<img height="35" width="87" border="0" alt="" src="http://i212.photobucket.com/albums/cc139/takeonecar/Kolossal_MGMT_MID6.jpg">
</a>
</td>
<td valign="top">
<a target="blank" href="https://twitter.com/BATTLEGHOSTRVA">
<img height="35" width="86" border="0" alt="" src="http://i212.photobucket.com/albums/cc139/takeonecar/Kolossal_MGMT_MID7.jpg">
</a>
</td>
<td valign="top">
<a target="blank" href="https://www.facebook.com/counttofour">
<img height="35" width="170" border="0" alt="" src="http://i212.photobucket.com/albums/cc139/takeonecar/Kolossal_MGMT_MID8.jpg">
</a>
</td>
</tr>
<tr>
<td valign="top" colspan="8">
<div style="height:100%;">
<img height="388" width="814" border="0" alt="" src="http://i212.photobucket.com/albums/cc139/takeonecar/Kolossal_MGMT_BOTF.jpg"></div>
</td>
</tr>
<tr>
<td valign="top" colspan="8">
<img height="12" width="814" border="0" alt="" src="http://i212.photobucket.com/albums/cc139/takeonecar/Kolossal_MGMT_FOOT.jpg">
</td>
</tr>
<tr>
<td valign="top" colspan="8">
<img height="12" width="814" border="0" alt="" src="http://i212.photobucket.com/albums/cc139/takeonecar/Kolossal_MGMT_FOOT.jpg">
</td>
</tr>
</tbody>
</table>
</body>