Tip: don't leave blank attributes in your <img> tags

After a few hours of hair pulling, I have discovered that leaving blank attribute values on your <img> template tags, like so:

<img src="<$imagesrc link='true'$>" width="200" height="" alt="" align="right">

will cause Outlook 2007 to ignore other attributes in the same tag (like the align="right" attribute, grr).
If you don't want to restrict the height of your image, leave the height attribute out completely. Same with the alt tag.. eg:

<img src="<$imagesrc link='true'$>" width="200" align="right">

Bonus tip, I've found that using hspace/vspace attributes seem to be the only reliable method to pad aligned images within text in Outlook 2007..

Stig Stig, 7 years ago

Hi Michael,

Thanks so much for sharing that. I've passed it on to our developers, as this should be something we could check for automatically when a campaign is imported.

Stig


The Campaign Monitor Blog – HTML email smarts to go with your good looks.
michaelroper, 7 years ago

No problem, glad to help... tell them donations to my hair-replacement fund will be gladly accepted.. =]

BThies BThies, 7 years ago

Be aware that vspace and hspace don't work in all e-mail clients, and using alignment in an image doesn't display the same across all e-mail clients either.


Brian Thies
Professional Email Developer
Thies Publishing
michaelroper, 7 years ago

Thanks Brian, I'll keep that in mind... I tried the 10px border method that you suggested in another thread, but that didn't seem to work for me in Outlook 2007..

toddprouty toddprouty, 5 years ago

A very belated response regarding your "bonus tip," Michael. I had the same problem when using the border method to pad aligned images, but found another solution that plays well with Outlook 2007 and others. Place the image inside a nested, left- or right-aligned table, and then apply the borders to the table instead of the image. The following assumes a white content area:

<td width="520" bgcolor="#FFFFFF">
    <table cellpadding="0" cellspacing="0" border="0" align="left" style="border-right: 15px solid #FFFFFF; border-bottom: 10px solid #FFFFFF;">
        <tr>
            <td width="347"><img src="image.jpg" alt="Photo" width="347" height="183" /></td>
        </tr>
    </table>
    <h2>Heading</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut placerat, est sed tincidunt pretium, odio enim consectetur massa, non faucibus ipsum quam eget arcu.</p>
</td>

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