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”>
<table width="550" border="0" cellspacing="0" cellpadding="0" class="bg2">
<tr>
<td class="permission" align="left" colspan = "2">
<p>You're receiving this newsletter because you bought widgets from us.</p>
<p>Not interested anymore? <a href="#">Unsubscribe</a>. Having trouble viewing this email? <a href="#">View it in your browser</a>.</p>
</td>
</tr>
<tr>
<td colspan = "2" cellpadding = "0" cellspacing="0" height="94"> <img src="slices/images/fathersday_01.jpg" alt="Header" width="550" height="94" />
</td>
</tr>
<tr>
<td colspan = "2" cellpadding = "0" cellspacing="0" height="291"> <img src="slices/images/fathersday_02.jpg" alt="Header" width="550" height="291" />
</td>
</tr>
<tr>
<td cellpadding = "0" cellspacing="0" height="275"> <img src="slices/images/fathersday_03.jpg" alt="Header" width="275" height="220" />
</td>
<td cellpadding = "0" cellspacing="0" height="275"> <img src="slices/images/fathersday_04.jpg" alt="Header" width="275" height="220" />
</td>
</tr>
<tr>
<td cellpadding = "0" cellspacing="0" height="275"> <img src="slices/images/fathersday_05.jpg" alt="Header" width="275" height="220" />
</td>
<td cellpadding = "0" cellspacing="0" height="275"> <img src="slices/images/fathersday_06.jpg" alt="Header" width="275" height="220" />
</td>
</tr>
<tr>
<td colspan = "2" cellpadding = "0" cellspacing="0"><img src="slices/images/fathersday_07.jpg" /> </td>
</tr>
<tr>
<td valign="middle" align="left" class="footer" height="61" colspan = "2">
<p>abcWidgets and the abcWidgets Logo are registered trademarks of abcWidgets Corp.<br />
<p>ABCWidgets Corp - 123 Some Street, City, ST 99999. ph +1 4 1477 89 745</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>