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


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>

Brian Thies
Thies Publishing

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

Thanks Brian, might give that a wirl.


Join 150,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free