Oscommerce Question posted in
The official documentation can be found here

Remove cellpadding ,cellspacing and border from table – Oscommerce

I tried to send simple newsletter using oscommerce platform and the content is simple table with few images. Before i send the preview look good (no cellspacing or cellpadding)

Preview:

enter image description here

But after I receive and open using gmail :

enter image description here

you can see the table is different; I mean the white border.

Here is code for generate table and content for newsletter .

<table border="0" cellspacing="0" cellpadding="0">
   <tbody>
      <tr>
         <td><img alt="" src="http://www.sfbeautyskin.com/uploads/image/Newsletter/Newsletter.jpg" style="width: 950px; height: 1187px;" /></td>
      </tr>
      <tr>
         <td><a href="http://www.sfbeautyskin.com/images//banners/Promotion_Dec_Xmas.jpg"><img alt="" src="http://www.sfbeautyskin.com/uploads/image/Newsletter2.jpg" style="width: 950px; height: 114px;" /></a></td>
      </tr>
      <tr>
         <td><a href="http://www.sfbeautyskin.com/index.php"><img alt="" src="http://www.sfbeautyskin.com/uploads/image/Newsletter3.jpg" style="width: 950px; height: 158px;" /></a></td>
      </tr>
      <tr>
         <td><a href="http://www.sfbeautyskin.com/contact_us.php"><img alt="" src="http://www.sfbeautyskin.com/uploads/image/Newsletter4.jpg" style="width: 950px; height: 440px;" /></a></td>
      </tr>
   </tbody>
</table>

The question is how to completely remove border property.

Tags:

5

Answers


  1. 0

    On each of your tr, td and img elements, add style="margin:0;padding:0;"

    Or just delete your table all together. They seem to serve no purpose.

    Login or Signup to reply.
  2. 0

    Now Define your img tag vertical-align:top 

    <img src="some.jpg" style="vertical-align:top;" />

    Demo

    ——–

    Login or Signup to reply.
  3. 0

    I’ve had a similar problem with emails before. If I remember correctly, I fixed it by making the image (or try ‘a’ tag) inside the td use display: block.

    Try something like this:

    <td><img alt="" style="display: block;" src="http://www.sfbeautyskin.com/uploads/image/Newsletter/Newsletter.jpg" style="width: 950px; height: 1187px;" /></td>
    Login or Signup to reply.
  4. 0

    Add style="line-height:0" for each td

    <td style="line-height:0"><img ... /></td>
    Login or Signup to reply.
  5. 0

    Check the fiddle.
    http://jsfiddle.net/tuD6L/12/

    margin: -5px 0;
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search