Problem aligning images in Outlook

This should be nice and easy, but I'm just totally stuck.

I have used your template builder and edited a layout to show a product with a a corresponding picture and also several images of color variations. I just can't get the color images to line up correctly in Outlook. All seems good in the web browser, but Outlook messes it up ofcourse.

The colors should line up like this:
https://dl.dropboxusercontent.com/u/47693856/Riktig.PNG

But in Outlook it displays like this:
https://dl.dropboxusercontent.com/u/47693856/Feil.PNG

How can I get these images to lign up correctly in Outlook? Code is as follows:

table[class=w80], td[class=w80], img[class=w80] { width:10px !important; float: left; }
table[class=w280], td[class=w280], img[class=w280] { width:135px !important; }
table[class=w580], td[class=w580], img[class=w580] { width:280px !important; }
.article-content { font-size: 13px; line-height: 18px; color: #2E2E2E; margin-top: 0px; margin-bottom: 18px; font-family: 'Helvetica Neue', Arial, Helvetica, Geneva, sans-serif; }


...

<layout label="Product with right-aligned image">
<table class="w580" width="580" cellpadding="0" cellspacing="0" border="0">
 <tbody><tr>
  <td valign="top" class="w280" width="280" style="float:left">
   <div align="left" class="article-content">
    <multiline label="Description top">Enter your description</multiline>
   </div>
   <div style="float:left">
   <img editable="true" label="Image" class="w80" width="80" border="0" align="left" style="float:left">
   <img editable="true" label="Image" class="w80" width="80" border="0" align="left" style="float:left">
   <img editable="true" label="Image" class="w80" width="80" border="0" align="left" style="float:left">
   <img editable="true" label="Image" class="w80" width="80" border="0" align="left" style="float:left">
   <img editable="true" label="Image" class="w80" width="80" border="0" align="left" style="float:left">
   <img editable="true" label="Image" class="w80" width="80" border="0" align="left" style="float:left">
   <img editable="true" label="Image" class="w80" width="80" border="0" align="left" style="float:left">
   <img editable="true" label="Image" class="w80" width="80" border="0" align="left" style="float:left">
   <img editable="true" label="Image" class="w80" width="80" border="0" align="left" style="float:left">
   <img editable="true" label="Image" class="w80" width="80" border="0" align="left" style="float:left">
   </div>
   <div align="left" class="article-content" style="clear:left">
    <multiline label="Description bottom">Enter your description</multiline>
   </div>
  </td>
  <td valign="top" width="20">&nbsp;</td>
  <td valign="top" class="w280" width="280">
   <img editable="true" label="Product image" class="w280" width="280" border="0">
  </td>
 </tr>
 <tr><td class="w580" width="580" height="10" colspan="3">&nbsp;</td></tr>
</tbody></table>
</layout>

I hope someone can point me in the right direction.

Tweedskin Tweedskin, 2 years ago

Hi,

Just had a very quick look at your code....I build emails from scratch so don't use the template builder, but I noticed this in your CSS...

"table[class=w80], td[class=w80], img[class=w80] { width:10px !important; float: left; }"

Should that width (the one that I've bolded) be 80px?

Tweedskin Tweedskin, 2 years ago

Also, I've noticed that all the widths on the CSS classes seem wrong...

"table[class=w80], td[class=w80], img[class=w80] { width:10px !important; float: left; }
table[class=w280], td[class=w280], img[class=w280] { width:135px !important; }
table[class=w580], td[class=w580], img[class=w580] { width:280px !important; }
.article-content { font-size: 13px; line-height: 18px; color: #2E2E2E; margin-top: 0px; margin-bottom: 18px; font-family: 'Helvetica Neue', Arial, Helvetica, Geneva, sans-serif; }"

I corrected the widths in the CSS to 80px, 280px, and 580px, (respectively) and that seems to have solved the problem in most versions of outlook. However, as I mentioned I don't use the template builder so could be entirely wrong here....anyone with template builder experience have anything to chip in?

Carissa Carissa, 2 years ago

Hi srlomme! I would recommend not using the float property, since most of the Outlooks will not support it. Check out our guide to CSS support for details.

Instead you might try using separate tables with the 'align' attribute as you can see in our responsive email guide.

Hope that works better for you!


Carissa
Campaign Monitor
srlomme srlomme, 2 years ago

Thanks guys.

Carissa got me in the right direction. Had to wrap the images in good old table-tags.

Tweedskin...the widths should be correct. This CSS is created by the template builder and comes along with it.

srlomme srlomme, 2 years ago

Thanks guys.

Carissa got me in the right direction. Had to wrap the images in good old table-tags.

Tweedskin...the widths should be correct. This CSS is created by the template builder and comes along with it.

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