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>
Related
i am trying to embed the following html form in email, using Thunderbird.
<html>
<head>
<title>eisitirio</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 (eisitirio.psd) -->
<table id="Table_01" width="835" height="4724" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="4">
<img src="eisitirio_01.png" width="835" height="1338" alt=""></td>
</tr>
<tr>
<td colspan="4">
<a href="https://www.ticketservices.gr/event/goutou-goupatou-theatro-aneton/?fbclid=IwAR0Gy0HRV9hRApR7jZajDtZ9Bt4Xa7FliSTHbDR7M1-kOO8kHgMdIvveLNw" target="_blank">
<img src="tickets.png" width="835" height="245" border="0" alt=""></a></td>
</tr>
<tr>
<td colspan="4">
<img src="eisitirio_03.png" width="835" height="1231" alt=""></td>
</tr>
<tr>
<td colspan="4">
<a href="https://www.youtube.com/watch?v=03upwfqlKEo" target="_blank">
<img src="teaser.png" width="835" height="305" border="0" alt=""></a></td>
</tr>
<tr>
<td colspan="4">
<img src="eisitirio_05.png" width="835" height="1325" alt=""></td>
</tr>
<tr>
<td>
<a href="https://www.facebook.com/endynameiensemble" target="_blank">
<img src="facebook.png" width="243" height="280" border="0" alt=""></a></td>
<td>
<a href="https://www.youtube.com/channel/UC4ecFndGyTEbycrUpnEkqUw" target="_blank">
<img src="youtube.png" width="186" height="280" border="0" alt=""></a></td>
<td>
<a href="https://www.instagram.com/endynamei.ensemble/" target="_blank">
<img src="instagram.png" width="174" height="280" border="0" alt=""></a></td>
<td>
<a href="http://www.endynamei.com/menoy" target="_blank">
<img src="site.png" width="232" height="280" border="0" alt=""></a></td>
</tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>
I try to insert the html code by choosing insert->HTML in thunderbird
I can not make it work properly . Can somebody help me please.
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>
I'm making a mailing html page and my social buttons keep having some kind of margin that I can't work away. I posted my code and a fiddle below so you can see where I'm stuck.
https://jsfiddle.net/zh78uc9s/
CODE:
<td rowspan="10" style="text-align: left" valign="top" width="auto" border="0" cellspacing="0" cellpadding="0">
<!--Social media knopkes en links-->
<table width="25px" height="100px" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="25" height="25"><img src="elementen/Spacer25.gif" width="25" height="25" border="0" cellspacing="0" cellpadding="0" alt="spacerke" /></td>
</tr>
<tr>
<td width="25" height="25">
<img src="elementen/facebook.gif" width="25" height="25" border="0" cellspacing="0" cellpadding="0" alt="facebook" />
</td>
</tr>
<tr>
<td width="25" height="25">
<img src="elementen/youtube.gif" width="25" height="25" border="0" cellspacing="0" cellpadding="0" alt="youtube" />
</td>
</tr>
<tr>
<td width="25" height="25">
<img src="elementen/linkedin.gif" width="25" height="25" border="0" cellspacing="0" cellpadding="0" alt="linkedin" />
</td>
</tr>
<tr>
<td width="25" height="25">
<img src="elementen/twitter.gif" width="25" height="25" border="0" cellspacing="0" cellpadding="0" alt="twitter" />
</td>
</tr>
</tbody>
</table>
</td>
The margin between each social buttons seams a td's style setting, try with
td {
display: inline-block;
}
JsFiddle
I've visited frequently for answers to my HTML problems, but this one has me stumped. I have tested the email backwards and forwards in Litmus, and it looks great in everything, but I had one colleague say that a copy that she received in her personal Gmail (using Chrome) always has a 1 pixel line between slices 2 + 3. I've picked apart the HTML character by character and cannot find a difference that would cause this line to only insert itself between these two slices, and none of the others.
A sample is posted below;
<tr>
<td align="center" valign="top">
<a href="http://sample.com" target="_blank">
<img src="http://Events_02.jpg" width="600" height="155" alt="Text1" style="display:block;" border="0"/>
</a>
</td>
</tr>
<tr>
<td align="center" valign="top">
<a href="http://sample.com" target="_blank">
<img src="http://Events_03.jpg" width="600" height="146" alt="Text2" style="display:block;" border="0"/>
</a>
</td>
</tr>
<tr>
<td align="center" valign="top">
<a href="http://sample.com" target="_blank">
<img src="http://Events_04.jpg" width="600" height="177" alt="Text3" style="display:block;" border="0"/>
</a>
</td>
</tr>
please have a look on the snippet i have created , this may help you.
Thanks
<html>
<head>
<title></title>
<style type="text/css">
body,table {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<table cellpadding="0" cellspacing="0">
<tr>
<td align="center" valign="top">
<a href="http://sample.com" target="_blank">
<img src="http://placehold.it/600x155" width="600" height="155" alt="Text1" style="display:block;" border="0"/>
</a>
</td>
</tr>
<tr>
<td align="center" valign="top">
<a href="http://sample.com" target="_blank">
<img src="http://placehold.it/600x155" width="600" height="146" alt="Text2" style="display:block;" border="0"/>
</a>
</td>
</tr>
<tr>
<td align="center" valign="top">
<a href="http://sample.com" target="_blank">
<img src="http://placehold.it/600x155" width="600" height="177" alt="Text3" style="display:block;" border="0"/>
</a>
</td>
</tr>
</table>
</body>
</html>
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>