img padding problems in IE8 Yahoo Mail

I'm having a problem with the padding in IE8 yahoo mail.  It works fine in Firefox but for some reason in IE it's not picking up the padding around the images at all.  I don't want to use hspace because my images are left aligned and I don't want any space added to the left-hand side.  The only think I can think is to add 15px of space on the right side of the image itself and re-source it.  Is there another solution out there?

Richard.Wendon Richard.Wendon, 6 years ago

The only one left is to use pure tables... so a table with three columns, image in the left cell. A shim (spacer) in the middle and on the right your copy. But of course all this depends on whether you want the text to wrap around the text?

fyredefyre fyredefyre, 6 years ago

Classic tables is the best way and you can use nestled tables aligned left or right to avoid margins and padding entirely.

Here's a example:

<table width="400" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="400"><table width="100" border="0" align="left" cellpadding="0" cellspacing="0">
      <tr>
        <td width="90"><img src="images/photo.jpg" width="90" height="90" /></td>
        <td width="10"></td>
      </tr>
      <tr>
        <td height="10" colspan="2"></td>
        </tr>
    </table>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sit amet nisl non enim faucibus mollis. Fusce sapien arcu, fringilla nec tincidunt vitae, ultrices vel nulla. Praesent sem tellus, tristique sed rhoncus in, pharetra a arcu. Phasellus nisl odio, condimentum et egestas sit amet, ornare a sapien. Sed condimentum nisi vitae mauris euismod ultrices. Donec nec libero massa, id euismod odio. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </td>
  </tr>
</table>

The text wraps around the table nicely which fits both an image and custom cells to space it out.


www.phenom.com.au - Everything Email.
Email: jordan.hunt@phenom.com.au Skype: fyredefyre
Richard.Wendon Richard.Wendon, 6 years ago

of course neither of us have asked if this is within a repeating element, which also makes a difference. some repeating stories if you like may not require an image. if that is the case hspace and vspace may work better as empty tables can be a bit flaky.

gsockwell, 6 years ago

I wasn't thinking of using more tables but now I learned something new - thanks!!  I wonder if it is better in the end to add the space to the image in Photoshop because you would be using less code?  I have about 3 images I need to do that to...  I'm not sure if that much more code would really be terrible or what best practices would be in this situation.  Thoughts?

BThies BThies, 6 years ago

Unless your code is over thousands of lines, I wouldn't worry about code size.

It's a good habit to simply add spacer <td>'s for horizontal alignment and <div>'s for vertical alignment for EVERYthing.  Nest tables and avoid using rowspans and colspans.


Brian Thies
Professional Email Developer
Thies Publishing
gsockwell, 6 years ago

Thanks for the help everyone!

Elias, 5 years ago

Quick new question for this thread...  I'm trying to achieve this: http://www.futureinvisible.com/grabs/398c5770.png  with tables, but when there is hspace of 10px on the image(which is an editable image in the template), then it appears that the image is 20px in on the left as you can see here: http://www.futureinvisible.com/grabs/db89a117.png 

Any work-arounds you can think of?

Much appreciated!

BThies BThies, 5 years ago

Hspace and vspace are not fully supported.  Use a nested table instead.

<table align="left" width="210" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="200">Image here</td>
<td width="10"></td>
</tr>
</table>
Your Title code
Your Paragraph code

If you need space below the image as well, you can add an additional row:

<table align="left" width="210" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="200">Image here</td>
<td width="10"></td>
</tr>
<tr>
<td width="200" height="10"></td>
<td width="10" height="10"></td>
</tr>
</table>
Your Title code
Your Paragraph code

Brian Thies
Professional Email Developer
Thies Publishing
Elias, 5 years ago

Thanks Brian! Worked great, now I just have to email client test it.

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free
1-888-533-8098