Search code examples
htmlhtml-tablehtml-email

How can I get rid of this one pixel space between table cells?

I'm designing an email campaign and my requirements dictate no CSS. Don't get me started on that.

Everything's working fine except for the table noted below. The corner pieces are offset from the rest of the table by one pixel, and I cannot for the life of me figure out where I've got a misplaced semicolon or something.

The corner pieces are the same 15x15 image, just rotated 90 degrees depending on the corner. But you can see that the lines go right up to the edge, so there's no extra padding on the image.

A corner, zoomed to like 3200%

I've tried various iterations with less and more <t* attributes, setting things at the table, row and cell levels, and 99% of the online searches are leading me to Q&As about making sure that the spans are working properly--and I think mine are. The cap is still there when I use a border=1 attribute leading me to not suspect borders as the culprit.

I'm using 4 columns x 3 rows, with the outermost columns and rows housing a 15px X 15px corner image (gif), and the cells between the corners have a white background with a 1px X 1px gif spacer aligned and stretched to give me a line between the corner images.

The center section is a cell with an icon, followed by a cell of text. I need to create 5 of these bullet-point things; I added a second, blank box to show what happens when two of these butt up against each other.

Anyone have any ideas for what I can look at, what I need to add or what I need to subtract from my code?

enter image description here 

<html>
 <body style='background:f3f7f8'>
     <table border=0 width=430 style='font-size=12px;cellpadding=0;cellspacing=0;border-collapse:collapse;'>
       <tr>
        <td width=15 height=15><img src="644810_tl.png" width=15 height=15 ></td>
        <td colspan=2 valign="top" style='background:ffffff'><img src="dkgray.gif" width=400 height=2></td>
        <td width=15 height=15><img src="644810_tr.png" width=15 height=15></td>  
       </tr>

       <tr>
        <td style='background=ffffff' align=left><img src="dkgray.gif" width=2 height=100></td>
        <td style='background=ffffff' width=75 align=center valign=center><img src="icon-pdf.gif"></td>
        <td style='background=ffffff' width=325 align=left valign=cener><strong>Lorem Ipsum<br></strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dignissim risus at quam hendrerit aliquet. Nunc et felis elit. Fusce pharetra adipiscing velit vel pharetra. Donec ornare velit sed massa tempor at tempor sem lacinia. Quisque enim nisl, auctor sit amet volutpat eget, porttitor sit amet tortor. Nulla ut sodales magna. Morbi adipiscing est urna, ac gravida erat.</td>
        <td style='background=ffffff' align=right><img src="dkgray.gif" width=2 height=100></td>
       </tr>

       <tr>
        <td width=15 height=15 style='background=ffffff'><img src="644810_bl.png" width=15 height=15></td>
        <td colspan=2 valign="bottom" style='background:ffffff;cellpadding=0;cellspacing=0;border-collapse:collapse'><img src="dkgray.gif" width=400 height=2></td>
        <td width=15 height=15 style='background=ffffff'><img src="644810_br.png" width=15 height=15></td>
       </tr>

       <tr>
        <td width=15 height=15><img src="644810_tl.png" width=15 height=15 ></td>
        <td colspan=2 valign="top" style='background:ffffff'><img src="dkgray.gif" width=400 height=2></td>
        <td width=15 height=15><img src="644810_tr.png" width=15 height=15></td>  
       </tr>

       <tr>
        <td width=15 height=15 style='background=ffffff'><img src="644810_bl.png" width=15 height=15></td>
        <td colspan=2 valign="bottom" style='background:ffffff;cellpadding=0;cellspacing=0;border-collapse:collapse'><img src="dkgray.gif" width=400 height=2></td>
        <td width=15 height=15 style='background=ffffff'><img src="644810_br.png" width=15 height=15></td>
       </tr>
     </table>
   </body>
  </html>
Solution

  • You're specifying cellpadding and cellspacing as though they were CSS properties. They're not - they're attributes that must live on the table tag.

    Also, HEX colour references should have the # before them.