1

I am building a responsive HTML email template, and when I Litmus test my layout, the images are being cut off at the top, as shown below...

enter image description here

Any reason why this is? Here is some code, with a jsfiddle

<table style="color: #4b4b4b; font-size:12px; font-family: arial, helvetica, sans-serif; line-height: 18px; mso-line-height-rule: exactly; " >
<tbody>
<tr>
  <td height="40" width="40"><img src="http://www.uploadlibrary.com/TelecomsWorld/CALL-STATS/stats_07.jpg" width="40" height="40" style="display:block;" /></td>
<td>Geographic call mapping across the UK</td>
</tr>
...

I have researched, and this answer was found, but no luck.

Thanks!

Community
  • 1
  • 1
Matt Maclennan
  • 1,266
  • 13
  • 40

2 Answers2

6

The line-height (and possibly the mso-line-height-rule) set on the table is causing Outlook to push the image up.

Do you really need it? If not, I suggest removing it. If you need it either set it on the <td> that wraps the text or add another table to wrap just the text and set the line-height there.

Update: I edited your code snippet to reflect the actual code that is shown in your screenshot.

Justin K
  • 369
  • 1
  • 10
0

Add the same dimensions to the table cell that are already part of the image.

<td class="center" align="left" style="margin: 0;" height="32" width="540"><img src="http://www.uploadlibrary.com/TelecomsWorld/GENERAL/lowbluespeechedge.jpg" width="540" height="32" class="img_scale" style="display:block;" /></td>

Also:

IS YOUR BUSINESS GROWING TO IT'S FULL POTENTIAL?

It's means it is. The possessive form of "it" has no apostrophe.

Diodeus - James MacFarlane
  • 112,730
  • 33
  • 157
  • 176
  • Hi there, tried the mentioned code, comes out the same though. Here is the Litmus test result... https://litmus.com/pub/ca7806d/screenshots – Matt Maclennan Jan 20 '14 at 21:37