Image borders...

In my (simple) design I wish to have an image border which has 3px padding from the actual image and a 1px border. I have done this is the 'usual' css way and it works in some mail clients but not all (see below).

CSS I'm using (in an external style sheet):

.workimage {
   padding: 3px;
   margin: 35px 0 25px 0;    
   background-color: #fff;
   border: 1px solid #bbbbbb;
   font-family: Lucida Sans Unicode, Lucida Grande, sans-serif;
   font-size: 11px;
   color: #777777;
   font-weight: normal;

Link to the email -

HTML I'm using

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <title>Popcorn - Fresh Work Mail</title>
   <link rel="stylesheet" type="text/css" href="screen.css">
<table width="100%" cellspacing="10" cellpadding="0">
      <td align="center" valign="top">
         <table width="600" border="0" cellspacing="0" cellpadding="0" class="main">
               <td height="150" valign="bottom" align="left" class="logo">
                  <a href=""><img src="logo.gif" border="0" width="50" height="45" alt="Visit our website" /></a>
               <td align="center">
                  <table width="600" cellspacing="0" cellpadding="0">
                     <tr align="left" valign="top">
                        <td width="600" valign="top" class="mainbar" align="left">
                           <table cellspacing="0" cellpadding="0">
                                    <h2>Christmas Animation</h2>
                                         <img src="hr-big.gif" width="600" height="10" alt="" />
                                <p>Hi [firstname,fallback=], </p><p>Van Communications approached us to do something a little different for their Christmas card this year. With the brief placing emphasis on an alternative to a printed card, something environmentally sound, which would also create a buzz online, we created the Christmas wishes animation. To view the animation <a href="#">click here</a>.</p>
                        <a href="#"><img class="work" src="van_animation.jpg" width="590" height="390" alt="Work image" /></a>
                        <img class="footer-hr" src="hr-big.gif" width="600" height="10" alt="" />             
               <td align="left" class="footer">
                  <p>Popcorn Design Ltd. 7 Tilney Court, Old Street, London EC1V 9BQ &bull; t. 0207 199 9290 &bull; e. <a href=""></a><br />
                  Know someone that should see this? <forwardtoafriend>Forward</forwardtoafriend> to a friend. Can't see it? View in your <webversion>browser</webversion>. Had enough? <unsubscribe>Unsubscribe</unsubscribe></p><br />

Does anyone know a solution to this?

Thanks in advance

Stig Stig, 9 years ago

Hi Roscoe,
since nobody's replied, I figured I'd give the quick-and-dirty solution :)

Forget the CSS border and add the border to the image.


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

yeah that's the best solution

border in images are a head hache

Roscoe, 9 years ago

Haha, that was going to be my final soultion! Thanks Stig.

BThies BThies, 9 years ago

Try this:

<div align="center" style="margin:35px 0px 25px 0px; border:1px solid #bbbbbb;>
    <div align="center" style="margin:3px;">
        <div><img src="van_animation.jpg" width="590" height="390" /></div>

Brian Thies
Thies Publishing

Brian Thies
Professional Email Developer
Thies Publishing
Roscoe, 9 years ago

Thanks Brian, might give that a wirl.


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