Trying to get sliced image to join up without any gaps in a html table

Here’s my code. I’m trying to convert a sliced image from Photoshop into a html table. The slices are in the right place and the table cells have been given zero padding and spacing so I thought that would make the image look seamless however there is still spaces between the slices.

Could someone lokk at this and see if there is something I’m missing to get it working. Thanks for your help.


<html>
<head>
<meta http-equiv=“Content-Type” content=“text/html; charset=utf-8”>
<title>Generic Template - Single Column</title>
<style type =“text/css”>
body {
background-color: #eeeeee;
}

a img {
border: none;
}

table.bg1 {
background-color: #eeeeee;
}

table.bg2 {
background-color: #ffffff;
}

td.permission {
background-color: #eeeeee;
padding: 10px 20px 10px 20px;
}

td.permission p {
font-family: Arial;
font-size: 11px;
font-weight: normal;
color: #333333;
margin: 0;
padding: 0;
}

td.permission p a {
font-family: Arial;
font-size: 11px;
font-weight: normal;
color: #333333;
}

td.body {
padding: 0;
background-color: #ffffff;
}

td.sidebar h3 {
font-family: Arial;
font-size: 15px;
font-weight: bold;
color: #333333;
margin: 0;
padding: 0;
}

td.sidebar ul {
font-family: Arial;
font-size: 13px;
font-weight: normal;
color: #333333;
margin: 6px 0 14px 24px;
padding: 0;
}

td.sidebar ul li a {
font-family: Arial;
font-size: 13px;
font-weight: normal;
color: #680606;
}

td.sidebar h4 {
font-family: Arial;
font-size: 13px;
font-weight: bold;
color: #680606;
margin: 6px 0 0 0;
padding: 0;
}

td.sidebar h4 a {
font-family: Arial;
font-size: 13px;
font-weight: bold;
color: #680606;
text-decoration: none;
}

td.sidebar p {
font-family: Arial;
font-size: 12px;
font-weight: normal;
color: #333333;
margin: 0 0 10px 0;
padding: 0;
}

td.sidebar p a {
font-family: Arial;
font-size: 12px;
font-weight: normal;
color: #680606;
text-decoration: none;
}

td.buttons {
padding: 20px 0 0 0;
}

td.mainbar h2 {
font-family: Arial;
font-size: 16px;
font-weight: bold;
color: #680606;
margin: 0;
padding: 0;
}

td.mainbar h2 a {
font-family: Arial;
font-size: 16px;
font-weight: bold;
color: #680606;
text-decoration: none;
margin: 0;
padding: 0;
}

td.mainbar img.hr {
margin: 0;
padding: 0 0 10px 0;
}

td.mainbar p {
font-family: Arial;
font-size: 13px;
font-weight: normal;
color: #333333;
margin: 0 0 14px 0;
padding: 0;
}

td.mainbar p a {
font-family: Arial;
font-size: 13px;
font-weight: normal;
color: #680606;
}

td.mainbar p.more a {
font-family: Arial;
font-size: 13px;
font-weight: normal;
color: #680606;
text-decoration: none;
}

td.mainbar ul {
font-family: Arial;
font-size: 13px;
font-weight: normal;
color: #333333;
margin: 0 0 14px 24px;
padding: 0;
}

td.mainbar ul li a {
font-family: Arial;
font-size: 13px;
font-weight: normal;
color: #680606;
}

td.footer {
padding: 0 20px 0 20px;
background-image: url(‘footer-bg.gif’);
background-repeat: no-repeat;
background-position: top center;
background-color: #333333;
height: 61px;
vertical-align: middle;
}

td.footer p {
font-family: Arial;
font-size: 11px;
font-weight: normal;
color: #ffffff;
line-height: 16px;
margin: 0;
padding: 0;
}
</style>
</head>
<body>

<table width=“100%” border=“0” cellspacing=“0” cellpadding=“0”>
<tr>
<td align=“center”>

     &lt;table width="550" border="0" cellspacing="0" cellpadding="0" class="bg2"&gt;
        &lt;tr&gt;
           &lt;td class="permission" align="left" colspan = "2"&gt;
              &lt;p&gt;You're receiving this newsletter because you bought widgets from us.&lt;/p&gt;
              &lt;p&gt;Not interested anymore? &lt;a href="#"&gt;Unsubscribe&lt;/a&gt;. Having trouble viewing this email? &lt;a href="#"&gt;View it in your browser&lt;/a&gt;.&lt;/p&gt;
           &lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;

      &lt;td colspan = "2" cellpadding = "0" cellspacing="0" height="94"&gt; &lt;img src="slices/images/fathersday_01.jpg" alt="Header" width="550" height="94" /&gt;
      &lt;/td&gt;
        &lt;/tr&gt;

		
		&lt;tr&gt;

      &lt;td colspan = "2" cellpadding = "0" cellspacing="0" height="291"&gt; &lt;img src="slices/images/fathersday_02.jpg" alt="Header" width="550" height="291"  /&gt;
      &lt;/td&gt;
        &lt;/tr&gt;
		
		&lt;tr&gt;

      &lt;td cellpadding = "0" cellspacing="0" height="275"&gt; &lt;img src="slices/images/fathersday_03.jpg" alt="Header" width="275" height="220"  /&gt;
      &lt;/td&gt;
	  &lt;td cellpadding = "0" cellspacing="0" height="275"&gt; &lt;img src="slices/images/fathersday_04.jpg" alt="Header" width="275" height="220"  /&gt;
      &lt;/td&gt;
        &lt;/tr&gt;
		
		&lt;tr&gt;

      &lt;td cellpadding = "0" cellspacing="0" height="275"&gt; &lt;img src="slices/images/fathersday_05.jpg" alt="Header" width="275" height="220"  /&gt;
      &lt;/td&gt;
	  &lt;td cellpadding = "0" cellspacing="0" height="275"&gt; &lt;img src="slices/images/fathersday_06.jpg" alt="Header" width="275" height="220"  /&gt;
      &lt;/td&gt;
        &lt;/tr&gt;
		
		&lt;tr&gt;
		&lt;td colspan = "2" cellpadding = "0" cellspacing="0"&gt;&lt;img src="slices/images/fathersday_07.jpg"  /&gt; &lt;/td&gt;
		&lt;/tr&gt;
		
		


        &lt;tr&gt;
           &lt;td valign="middle" align="left" class="footer" height="61" colspan = "2"&gt;
              &lt;p&gt;abcWidgets and the abcWidgets Logo are registered trademarks of abcWidgets Corp.&lt;br /&gt;
              &lt;p&gt;ABCWidgets Corp - 123 Some Street, City, ST 99999. ph +1 4 1477 89 745&lt;/p&gt;
           &lt;/td&gt;
        &lt;/tr&gt;
     &lt;/table&gt;

  &lt;/td&gt;

</tr>
</table>

</body>
</html>


Have you tried this:

img { vertical-align: bottom; }

thanks for that - it worked for the top 2 images but there’s still a vertical space between the second image and the 2 that follow below.

any help would be great. thanks

just out of curiosity, have you tried:

td, img { vertical-align: bottom; }

no, i’ll give that a try

no joy with that!!

You set a height on your td’s of height=“275”

and the images inside are height=“220”

So either you change the height of the td’s to match the images, or you change the height of the images to match the td’s…

Your Current Code:

<td cellpadding="0" cellspacing="0" height="275"> <img src="http://helios.gsfc.nasa.gov/image_euv_press.jpg" alt="Header" width="275" height="220" /></td>