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).

http://www.popcornbox.com/emailtesting/problem2.jpg

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 - http://www.popcornbox.com/emailtesting/popcorn/freshmail/

HTML I'm using

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
   <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">
</head>
<body>
<table width="100%" cellspacing="10" cellpadding="0">
   <tr>
      <td align="center" valign="top">
         <table width="600" border="0" cellspacing="0" cellpadding="0" class="main">
            <tr>
               <td height="150" valign="bottom" align="left" class="logo">
                  <a href="http://www.popcornbox.com/"><img src="logo.gif" border="0" width="50" height="45" alt="Visit our website" /></a>
               </td>
            </tr>
            <tr>
               <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">
                              <tr>
                                 <td>
                                    <h2>Christmas Animation</h2>
                                         <img src="hr-big.gif" width="600" height="10" alt="" />
                                 </td>
                              </tr>
                           </table>
                                <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>
            </tr>
            <tr>
               <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="mailto:studio@popcornbox.com">studio@popcornbox.com</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 />
               </td>
            </tr>
         </table>
      </td>
   </tr>
</table>
</table>
</body>
</html>

Does anyone know a solution to this?

Thanks in advance

Stig Stig, 8 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.

Stig


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

yeah that's the best solution

border in images are a head hache

Roscoe, 8 years ago

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

BThies BThies, 8 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>
    </div>
</div>


Brian Thies
Thies Publishing
bthies@thiespublishing.com
www.thiespublishing.com


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

Thanks Brian, might give that a wirl.

Ross

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