image borders and outlook 2007

Hi All

In my email template I have css code to show a border around an image. This border is not being displayed. From what I have read this should be supported. Here is the section of code, it is in the first table cell:

<table align="center" width="631" cellspacing="0" cellpadding="0" border="0" bgcolor="#eaf2d1">
    <tr>
        <td valign="middle" width="234" align="left" style="padding:0;">
                                                <img src="<$imagesrc link='true'$>" width="230" class="mainImage" style="border:2px solid #EAF2D1;">
                                </td>
        <td valign="middle" width="397" align="left" style="padding:0 15px;">
            <p style="font-size: 22px; color: #919885;font-family: Verdana, Arial, Helvetica, sans-serif;padding:0;"><$title link='true' default='Main story or special offer'$></p>
            <div class="mainContent" style="color:#919885;font-family: Verdana, Arial, Helvetica, sans-serif;font-size:12px;margin:0;padding:0;"><$description default='Main story content.'$></div>
        </td>
    </tr>
</table>

Any assistance would be appreciated.

Cheers

Stormy Stormy, 8 years ago

Hi tame4tex,

The image has also been assigned to a class (class="mainImage") as well as having inline styles - is there any styling assigned to the class that might be conflicting?


No-one expects the Spanish Inquisition!
tame4tex, 8 years ago

Thanks for the suggestion. I just tried again removing the class="mainImage" and still no border.

Stormy Stormy, 8 years ago

Only other thing I can think of is that it's not accepting shorthand CSS - try style="border:2px; border-style:solid; border-color:#EAF2D1;".

Fingers crossed!


No-one expects the Spanish Inquisition!
tame4tex, 8 years ago

Thanks for trying stormy ... still no luck :-(

saskia, 8 years ago

Same problem here. Outlook 2007 does not show image borders. Checked it, doublechecked it and checked it again. Googled it, did find this post (but not much else). Can't imagine other designers did not stumble upon this annoying issue.

Could only think of a workaround: photoshop the border in/around it.

Would love to do it the css way, but trying to find the typo/etc. took already too much of my time..

Diana Diana, 8 years ago

You could try putting a div around it and assigning the border to that. You could also have the border on the td that the image is in, but I can't tell you off the top of my head what email clients that would work in.


~*~~*~~*~~*~
D. Potter
Campaign Monitor
transformer, 7 years ago

I have the same problem, Outlook 2007 seems to be ignoring the margin, border and align styles on the image. I tried wrapping the image in a div and putting the styles on that instead, but to no avail... any progress on this in the 2 years since the last post?

mattysk, 5 years ago

Also trying to find a solution to the image border and margin problem in Outlook 2007. Don't really want to use a table wrapper as its part of a CMS.

For border I've tried short and long hand CSS as above.
For margin I had a little success with hspace but this adds a margin around both sides of the images. I have a right aligned image with the need to add space around the left hand side to stop the flowed text from touching it.

Any ideas would be much appreciated.

BThies BThies, 5 years ago

The only solution is to nest a table with the image within it.  If you need spacing between text and image AND need a border, use a double nested like this:

<table width="200" cellpadding="0" cellspacing="0" border="0" align="right">
   <tr>
      <td width="200" height="1" bgcolor="#000000"></td>
   </tr>
   <tr>
      <td width="200"><table width="200" cellpadding="0" cellspacing="0" border="0">
         <tr>
            <td width="1" bgcolor="#000000"></td>
            <td width="10"></td>
            <td width="188"><img src="yourimage.jpg" width="188" height="150" border="0" style="display:block;" /></td>
            <td width="1" bgcolor="#000000"></td>
         </tr>
      </table></td>
   </tr>
   <tr>
      <td width="200" height="1" bgcolor="#000000"></td>
   </tr>
</table>
<p>Insert copy here</p>

Note: I'm not using the border style in the above code as it's not compatible in Outlook Web Access (OWA).  If you don't care about OWA, use something like this:

<table width="200" cellpadding="0" cellspacing="0" border="0" align="right">
   <tr>
      <td width="198" style="border:1px solid #000000;"><table width="198" cellpadding="0" cellspacing="0" border="0">
         <tr>
            <td width="10"></td>
            <td width="188"><img src="yourimage.jpg" width="188" height="150" border="0" style="display:block;" /></td>
         </tr>
      </table></td>
   </tr>
</table>
<p>Insert copy here</p>

Brian Thies
Professional Email Developer
Thies Publishing
mattysk, 5 years ago

Thanks Brian - really appreciate your input on this forum.

transformer, 5 years ago

Ditto, mattysk. Thanks for sharing your solution, Brian. I look forward to trying it out first chance I get :o)

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