Menu
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?
904
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.
193
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
