CODEWITHSUNDEEP
outlookhtml-email
Cassandra Gelvin
Cassandra Gelvin

Reputation: 325

How can I fix image display in Outlook 2013?

In the trial version of Outlook 2013, images in HTML emails are being displayed very oddly. As far as I can figure through testing, it looks like images shorter than 20 pixels tall have padding added to make them 20 pixels tall. Is there anything I can do to change that? These emails look fine in Outlook 2010 and everywhere else I have been testing them.

I have tried changing the height of the table cell they are in (through height="13" as well as inline css) as well as the table and the table row they are in, all to no avail. The following code is a simple example of something which triggers this issue, in that you will be able to see the red background of the cell above the image:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<table border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="195" style="background-color:#ff0000;"><img src="image url here" alt="" width="195" height="13" style="display: block" /></td>
  </tr>
</table>
</body>
</html>

Can anyone help?

Upvotes: 14

Views: 22856

Answers (4)

tgormtx
tgormtx

Reputation: 322

I found that adding <font size="1"><img /></font> also works to fix the issue.

Upvotes: 0

Alex Gontcharov
Alex Gontcharov

Reputation: 119

Add style="display:block;" to any image tag. <img src="/img/s.gif" width="1" height="1" alt="" style="display:block;">

This will remove that extra padding.

Upvotes: -1

Matt Coughlin
Matt Coughlin

Reputation: 18896

Add a line-height style to the td tag (and for good measure, add a height attribute to the td tag as well).

<table border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="195" height="13" style="background-color:#ff0000; line-height:13px;">
      <img src="..." alt="" width="195" height="13" style="display:block;" />
    </td>
  </tr>
</table>

The modified code tested fine in Litmus for all versions of Outlook.

Upvotes: 20

Daniel Dabes
Daniel Dabes

Reputation: 5

Remove cell-padding this you wont see that red bg.

Upvotes: 0

Related Questions