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, 6 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>

See why 200,000 companies worldwide love Campaign Monitor.

From Australia to Zimbabwe, and everywhere in between, companies count on Campaign Monitor for email campaigns that boost the bottom line.

Get started for free