Outlook 2007 Image and ul issues

Outlook 2007 has me confused again. I've got images that have a 3 px border and a left and bottom margin of 10px that a client will be inserting. I'm okay with the border not rendering in Outlook, but the margin is non-negoitable. Note that I've also tried wrapping the image in a div with no luck. I'm also having difficulty with the second line of a li indenting. Here's a screenshot of the issues in outlook 07:


Here's the html and the css (being applied inline via CM):

<td class="main-content" valign="top" align="left">
        <h2>Lorem ipsum modo</h2>
        <img src="images/boy.jpg" alt="boy" width="225" height="175" border="0" align="right"/>
        <p>Simul mel ei, prima iusto similique ei sea. Iuvaret mandamus per eu, est eu torquatos mediocritatem. Sumo sint torquatos duo ne, ex mei illud intellegat, mutat salutandi conceptam ad vix. Altera apeirian takimata ei vim. Eu <a href="#">duo ridens maiestatis</a> scriptorem, pri cu eros saperet habemus. Dicant quaestio te sit, et posse lorem homero has.Vix amet ceteros tibique ea, hinc tation sensibus sea ad.</p>
        <p>Sea veritus <a href="#">constituto instructior</a> ea, utinam conseteturne nec, ea mei ridens appetere. No suas tantas reformidans vel, an qui homero audire. Latine quaeque reprimique mea te, an duo modo alia referrentur, no quodsi causae molestie vis. Per ei iusto evertitur, ut nam novum graecis splendide, fuisset laboramus vituperatoribus nec id. Vim an lucilius pertinacia scribentur, pri odio nominati consetetur in.</p>
            <li>Latine quaeque reprimique mea te</li>
            <li>An duo modo alia referrentur</li>
            <li>No quodsi causae molestie vis, per ei iusto evertitur, ut nam novum graecis splendide, fuisset laboramus vituperatoribus nec id</li>
td.main-content img    { margin: 0 0 10px 10px; border: 3px solid #4e3d27; }
td.main-content ul li    { font-family: arial narrow, arial, sans-serif; font-size: 14px; line-height: 19px; color: #3b3838; list-style-position: outside; margin: 0 0 .5em 1em; padding-left: 0; }

Thanks for any ideas!

zapatoche, 7 years ago

for the image you could try:

<img src="images/boy.jpg" alt="boy" width="225" height="175" border="0" align="right" hspace="10" style="margin-left: 10px; margin-right: 0;" />

the style will override the hspace definition to align the image on the right and set the left border. But if the style is not applied it default to the hspace value (applied to both horizontal sides of the image).

it is probably a good idea to break down your margin declaration, short-hand properties are not fully supported.

As for the border i found out that if you apply the border with a colour keyword it works better.
border-color: blue;

robsedor, 7 years ago

Outlook does not reliably support adjusting the left margin of a bullet.  If you want to precisely control bulleted lists you should skip using <ul> tags entirely and create the bulleted lists using a nested table, with separate cells for the bullet and the indented copy.

For example:  <td>&bull;</td><td>copy goes here</td>.  Then use inline styling as needed.  Ugly, I know, but this will give you precise control and work in all clients.

Digital Ars

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