Vertical Lines with Top and Bottom Padding Inside Expanding Tables

I am trying to add vertical lines as dividers to my campaign monitor e-newsletter blast. I know several ways to get lines in between table cells, problem is I need padding on the top and bottom of these lines and I need them scallable. I have included an image to help better explain what I am trying to accomplish.

My current setup allows tables to expand and collapse whenever I upload the template to Campaign Monitor it just does not have the vertical lines as dividers that I need.

Is there a way to add vertical lines as a background image between 2 images that are scalable and have x-amount of pixels or a percentage i.e. 10% based on scaling of the table?

So that basically when larger images are placed within a table the line scrolls with them to size but still has the alloted amount of padding with it? And, adversely for smaller pictures?

Please help any help is greatly appreciated.

http://i1189.photobucket.com/albums/z437/marketing_starbeverageco/vertical-line-help.jpg

roshodgekiss roshodgekiss, 4 years ago

Hi Star Beverage, perhaps I can suggest adding the images to a 3-column table (image | empty cell | image), then popping a background image into the cell? You can recreate the 'padding' by breaking this cell into 2 rows and adding a white image with valign="top" and valign="bottom" respectively.

Unfortunately you can't count on height: 100%; to work, so there may not be a CSS solution around this :P


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
Star Beverage Star Beverage, 4 years ago

Okay, did not think of doing it that way :). Thank you so much once again for your help roshodgekiss.

So, I did exactly as stated but now I am having an issue with the bottom "spacer" image. It does not attach itself to the bottom of the table even with valign="bottom" on both the cell and the image. It tends to stay stationary, or in place and not expand when the tables expand.

Do I need to make it a child of some other element? That was the first thing that popped in my head, just make it subservient to some other element. Perhaps the cell with the background?

Or, do I need to assign it style="position:?????"? Would that help?

roshodgekiss roshodgekiss, 4 years ago

Hi Star Beverage, which client are you seeing this in? I'm using the following code...

<table width="0" border="1" cellspacing="0" cellpadding="0">
  <tr>
    <td rowspan="2"><img src="http://placehold.it/50x200" /></td>
    <td><img src="http://placehold.it/200x50" /></td>
    <td rowspan="2"><img src="http://placehold.it/50x200" /></td>
  </tr>
  <tr>
    <td valign="bottom"><img src="http://placehold.it/200x50" /></td>
  </tr>
</table>

... and am finding that valign="bottom" is working fine in Outlook 2007 and others. Happy to experiment if a specific client is causing you trouble :)


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
Star Beverage Star Beverage, 4 years ago

Okay, so I tried what you said with the code you gave me, and sure enough it worked great. Here is where I ran into a dilemma though.

The template I am creating is a mash up of a template I created in the Campaign Monitor template builder and exported then I tweeked it with my own styling. So when I input the table layout into this hybrid sort-of template it does not seem to function the same way it does in the more simplistic form(that you gave me earlier).

So, here is my code for a two column image layout. Maybe, you can help me figure out why the vertical lines will not expand and collapse with the table.

                    <layout label="Row of two images">
                        <table class="w580" width="580" cellpadding="0" cellspacing="0" border="0">
                          <!--DWLayoutTable-->
                            <tbody><tr>
                                <td width="280" height="88" valign="top" class="w280">
                                    <table class="w280" width="280" cellpadding="0" cellspacing="0" border="0">
                                        <tbody><tr>
                                            <td class="w280" width="280"><img editable="true" label="Image" class="w280" width="280" border="0"></td>
                                        </tr>
                                        <tr><td class="w280" width="280" height="10"></td></tr>
                                        <tr>
                                            <td class="w280" width="280">
                                                <div align="center" class="article-content"><multiline label="Description">Enter your description</multiline></div>                                            </td>
                                        </tr>
                                        <tr><td class="w280" width="280" height="10"></td></tr>
                                    </tbody></table>                                </td>
                                <td width="20" valign="top"><table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
                                  <!--DWLayoutTable-->
                                  <tr>
                                    <td width="20" height="20" valign="top" bgcolor="#FFFFFF"><img src="images/spacer.jpg" width="20" height="20" /></td>
                                  </tr>
                                  <tr>
                                    <td height="68" valign="bottom" bgcolor="#FFFFFF" style="background-image:url(images/line.jpg); background-repeat:repeat-y;"><img src="images/spacer.jpg" width="20" height="20" /></td>
                                  </tr>
                                </table></td>
                                <td width="280" valign="top" class="w280">
                                    <table class="w280" width="280" cellpadding="0" cellspacing="0" border="0">
                                        <tbody><tr>
                                            <td class="w280" width="280"><img editable="true" label="Image" class="w280" width="280" border="0"></td>
                                        </tr>
                                        <tr><td class="w280" width="280" height="10"></td></tr>
                                        <tr>
                                            <td class="w280" width="280">
                                                <div align="center" class="article-content"><multiline label="Description">Enter your description</multiline></div>                                            </td>
                                        </tr>
                                        <tr><td class="w280" width="280" height="10"></td></tr>
                                    </tbody></table>                                </td>
                            </tr>
                        </tbody></table>
                    </layout>

Thank you so much again in advance for your help!

Star Beverage Star Beverage, 4 years ago

Also, if someone wants the full code so they can try and input it into Campaign Monitor to see what I am talking about I can give that also.

Alex I., 4 years ago

I'd like the full code, I'll give it a crack :)

Star Beverage Star Beverage, 4 years ago

Here you go!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><title></title><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><style type="text/css">
/* Mobile-specific Styles */
@media only screen and (max-device-width: 480px) { 
table[class=w0], td[class=w0] { width: 0 !important; }
table[class=w10], td[class=w10], img[class=w10] { width:5px !important; }
table[class=w15], td[class=w15], img[class=w15] { width:5px !important; }
table[class=w30], td[class=w30], img[class=w30] { width:10px !important; }
table[class=w60], td[class=w60], img[class=w60] { width:10px !important; }
table[class=w125], td[class=w125], img[class=w125] { width:80px !important; }
table[class=w130], td[class=w130], img[class=w130] { width:55px !important; }
table[class=w140], td[class=w140], img[class=w140] { width:90px !important; }
table[class=w160], td[class=w160], img[class=w160] { width:180px !important; }
table[class=w170], td[class=w170], img[class=w170] { width:100px !important; }
table[class=w180], td[class=w180], img[class=w180] { width:80px !important; }
table[class=w195], td[class=w195], img[class=w195] { width:80px !important; }
table[class=w220], td[class=w220], img[class=w220] { width:80px !important; }
table[class=w240], td[class=w240], img[class=w240] { width:180px !important; }
table[class=w255], td[class=w255], img[class=w255] { width:185px !important; }
table[class=w275], td[class=w275], img[class=w275] { width:135px !important; }
table[class=w280], td[class=w280], img[class=w280] { width:135px !important; }
table[class=w300], td[class=w300], img[class=w300] { width:140px !important; }
table[class=w325], td[class=w325], img[class=w325] { width:95px !important; }
table[class=w360], td[class=w360], img[class=w360] { width:140px !important; }
table[class=w410], td[class=w410], img[class=w410] { width:180px !important; }
table[class=w470], td[class=w470], img[class=w470] { width:200px !important; }
table[class=w580], td[class=w580], img[class=w580] { width:280px !important; }
table[class=w640], td[class=w640], img[class=w640] { width:300px !important; }
table[class=hide], td[class=hide], img[class=hide], p[class=hide], span[class=hide], .hide { display:none !important; }
table[class=h0], td[class=h0] { height: 0 !important; }
p[class=footer-content-left] { text-align: center !important; }
#headline p { font-size: 30px !important; }
 } 
/* Client-specific Styles */
#outlook a { padding: 0; }    /* Force Outlook to provide a "view in browser" button. */
body { width: 100% !important; }
.ReadMsgBody { width: 100%; }
.ExternalClass { width: 100%; display:block !important; } /* Force Hotmail to display emails at full width */
/* Reset Styles */
/* Add 100px so mobile switch bar doesn't cover street address. */
html, body { background-color: #e2e2e2; margin: 0; padding: 0; }
img { height: auto; line-height: 100%; outline: none; text-decoration: none; display: block;}
br, strong br, b br, em br, i br { line-height:100%; }
h1, h2, h3, h4, h5, h6 { line-height: 100% !important; -webkit-font-smoothing: antialiased; }
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: blue !important; }
h1 a:active, h2 a:active,  h3 a:active, h4 a:active, h5 a:active, h6 a:active {    color: red !important; }
/* Preferably not the same color as the normal header link color.  There is limited support for psuedo classes in email clients, this was added just for good measure. */
h1 a:visited, h2 a:visited,  h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited { color: purple !important; }
/* Preferably not the same color as the normal header link color. There is limited support for psuedo classes in email clients, this was added just for good measure. */  
table td, table tr { border-collapse: collapse; }
.yshortcuts, .yshortcuts a, .yshortcuts a:link,.yshortcuts a:visited, .yshortcuts a:hover, .yshortcuts a span {
color: black; text-decoration: none !important; border-bottom: none !important; background: none !important;
}    /* Body text color for the New Yahoo.  This example sets the font of Yahoo's Shortcuts to black. */
/* This most probably won't work in all email clients. Don't include <code _tmplitem="61" > blocks in email. */
code {
  white-space: normal;
  word-break: break-all;
}
#background-table { background-color: #e2e2e2; }
/* Webkit Elements */
#top-bar { border-radius:6px 6px 0px 0px; -moz-border-radius: 6px 6px 0px 0px; -webkit-border-radius:6px 6px 0px 0px; -webkit-font-smoothing: antialiased; background-color: #e2e2e2; color: #0c4da2; }
#top-bar a { font-weight: bold; color: #0c4da2; text-decoration: none;}
#footer { border-radius:0px 0px 6px 6px; -moz-border-radius: 0px 0px 6px 6px; -webkit-border-radius:0px 0px 6px 6px; -webkit-font-smoothing: antialiased; }
/* Fonts and Content */
body { font-family: Helvetica Neue, Arial, Helvetica, Geneva, sans-serif; }
.header-content, .footer-content-left, .footer-content-right { -webkit-text-size-adjust: none; -ms-text-size-adjust: none; }
/* Prevent Webkit and Windows Mobile platforms from changing default font sizes on header and footer. */
.header-content { font-size: 10px; color: #0c4da2; }
.header-content a { font-weight: bold; color: #0c4da2; text-decoration: none; }
#headline p { color: #666666; font-family: Helvetica Neue, Arial, Helvetica, Geneva, sans-serif; font-size: 36px; text-align: center; margin-top:0px; margin-bottom:30px; }
#headline p a { color: #666666; text-decoration: none; }
.article-title { font-size: 18px; line-height:24px; color: #ed1b34; font-weight:bold; margin-top:0px; margin-bottom:18px; font-family: Helvetica Neue, Arial, Helvetica, Geneva, sans-serif; }
.article-title a { color: #ed1b34; font-weight: bold; text-decoration: underline; }
.article-title.with-meta {margin-bottom: 0;}
.article-meta { font-size: 13px; line-height: 20px; color: #ccc; font-weight: bold; margin-top: 0;}
.article-content { font-size: 13px; line-height: 18px; color: #666666; margin-top: 0px; margin-bottom: 18px; font-family: Helvetica Neue, Arial, Helvetica, Geneva, sans-serif; }
.article-content a { color: #666666; font-weight: bold; text-decoration: underline; }
.article-content img { max-width: 100% }
.article-content ol, .article-content ul { margin-top:0px; margin-bottom:18px; margin-left:19px; padding:0; }
.article-content li { font-size: 13px; line-height: 18px; color: #666666; }
.article-content li a { color: #666666; text-decoration: underline; }
.article-content p {margin-bottom: 0px;}
.footer-content-left { font-size: 10px; line-height: 15px; color: #666666; margin-top: 0px; margin-bottom: 0px; }
.footer-content-left a { color: #666666; font-weight: bold; text-decoration: underline; }
.footer-link { font-size: 11px; line-height: 0px; color: #0c4da2; margin-top: 0px; margin-bottom: 0px; font-weight: bold; text-decoration: none; }
.footer-link a { font-size: 11px; line-height: 0px; color: #0c4da2; margin-top: 0px; margin-bottom: 0px; font-weight: bold; text-decoration: none; }
.footer-content-right { font-size: 11px; line-height: 16px; color: #666666; margin-top: 0px; margin-bottom: 0px; }
.footer-content-right a { color: #0c4da2; font-weight: bold; text-decoration: none; }
#footer { background-color: #e2e2e2; color: #666666; }
#footer a { color: #0c4da2; text-decoration: none; font-weight: bold; }
.footer-content-right1 {font-size: 11px; line-height: 16px; color: #666666; margin-top: 0px; margin-bottom: 15px; }
.footer-content-right2 {font-size: 11px; line-height: 16px; color: #666666; margin-top: 0px; margin-bottom: 0px; }
</style>
<!--[if gte mso 9]>
<style _tmplitem="61" >
.article-content ol, .article-content ul {
   margin: 0 0 0 24px;
   padding: 0;
   list-style-position: inside;
}
</style>
<![endif]--></head>
<body><table width="100%" cellpadding="0" cellspacing="0" border="0" id="background-table">
    <tbody><tr>
        <td align="center" bgcolor="#e2e2e2">
            <table class="w640" width="640" cellpadding="0" cellspacing="0" border="0">
              <!--DWLayoutTable-->
                <tbody><tr><td class="w640" width="640" height="20"></td></tr>
                
                <tr>
                    <td class="w640">
                        <table id="top-bar" class="w640" width="640" cellpadding="0" cellspacing="0" border="0" bgcolor="#ffffff">
    <tbody><tr>
        <td class="w15" width="15"></td>
        <td class="w325" width="350" valign="middle" align="left">
            <table class="w325" width="350" cellpadding="0" cellspacing="0" border="0">
                <tbody><tr><td class="w325" width="350" height="8"></td></tr>
            </tbody></table>
            <div class="header-content"><webversion><u>Click Here</u></webversion> 
              if you are having trouble reading this email!            </div>
            <table class="w325" width="350" cellpadding="0" cellspacing="0" border="0">
                <tbody><tr><td class="w325" width="350" height="8"></td></tr>
            </tbody></table>        </td>
        <td class="w30" width="30"></td>
        <td class="w255" width="255" valign="middle" align="right">
            <table class="w255" width="255" cellpadding="0" cellspacing="0" border="0">
                <tbody><tr><td class="w255" width="255" height="8"></td></tr>
            </tbody></table>
            <table cellpadding="0" cellspacing="0" border="0">
              <!--DWLayoutTable-->
    <tbody><tr>
        
        <td width="14" height="18"></td>
        <td width="28" valign="middle"><div class="header-content">Share</div></td>
        
        <td width="7"></td>
        <td valign="middle"><fblike><img src="images/facebook.gif" border="0" width="18" height="18" alt="Facebook icon"=""></fblike></td>
        <td width="7"></td>
        <td width="19" valign="middle"><tweet><img src="images/twitter.gif" border="0" width="19" height="18" alt="Twitter icon"=""></tweet></td>
        <td width="6"></td>
        <td valign="middle"><div class="header-content">
          Forward
        </div></td>
        
        
        <td width="4"></td>
        <td width="29" valign="middle"><forwardtoafriend><img src="images/mail.gif" border="0" width="29" height="18" alt="Forward icon"=""></forwardtoafriend></td>
        </tr>
</tbody></table>
            <table class="w255" width="255" cellpadding="0" cellspacing="0" border="0">
                <tbody><tr><td class="w255" width="255" height="8"></td></tr>
            </tbody></table>        </td>
        <td class="w15" width="15"></td>
    </tr>
</tbody></table>                    </td>
                </tr>
                <tr>
                <td height="128" align="center" valign="top" bgcolor="#ffffff" class="w640" id="header">
    
                  <table class="w640" width="640" cellpadding="0" cellspacing="0" border="0">
                    <!--DWLayoutTable-->
                    <tbody><tr><td width="640" height="128" valign="top" bgcolor="#FFFFFF" class="w580"><img editable='true' width="640" src='images/header_austin.jpg' /></td>
              </tr>
      </tbody>
                  </table></td>
                </tr>
                
                
                
                
                
                
                <tr id="gallery-content-row"><td class="w640" bgcolor="#ffffff">
    <table class="w640" width="640" cellpadding="0" cellspacing="0" border="0">
        <tbody><tr>
            <td class="w30" width="30"></td>
            <td class="w580" width="580">
                <repeater>
                                    
                
                    <layout label="Text only">
                        <table class="w580" width="580" cellpadding="0" cellspacing="0" border="0">
                            <tbody><tr>
                                <td class="w580" width="580">
                                    <p align="left" class="article-title"><singleline label="Title">Add a title</singleline></p>
                                    <div align="left" class="article-content">
                                        <multiline label="Description">Enter your description</multiline>
                                    </div>                                </td>
                            </tr>
                            <tr><td class="w580" width="580" height="10"></td></tr>
                        </tbody></table>
                    </layout>
                                        
                    
                    <layout label="Full width image">
                        <table class="w580" width="580" cellpadding="0" cellspacing="0" border="0">
                            <tbody><tr>
                                <td class="w580" width="580" valign="top">
                                    <table class="w580" width="580" cellpadding="0" cellspacing="0" border="0">
                                        <tbody><tr>
                                            <td class="w580" width="580"><img editable="true" label="Image" class="w580" width="580" border="0"></td>
                                        </tr>
                                        <tr><td class="w580" width="580" height="10"></td></tr>
                                        <tr>
                                            <td class="w580" width="580">
                                                <div align="center" class="article-content"><multiline label="Description">Enter your description</multiline></div>                                            </td>
                                        </tr>
                                        <tr><td class="w580" width="580" height="10"></td></tr>
                                    </tbody></table>                                </td>
                            </tr>
                        </tbody></table>
                    </layout>
                                        
                    
                    <layout label="Row of two images">
                        <table class="w580" width="580" cellpadding="0" cellspacing="0" border="0">
                          <!--DWLayoutTable-->
                            <tbody><tr>
                                <td width="280" height="88" valign="top" class="w280">
                                    <table class="w280" width="280" cellpadding="0" cellspacing="0" border="0">
                                        <tbody><tr>
                                            <td class="w280" width="280"><img editable="true" label="Image" class="w280" width="280" border="0"></td>
                                        </tr>
                                        <tr><td class="w280" width="280" height="10"></td></tr>
                                        <tr>
                                            <td class="w280" width="280">
                                                <div align="center" class="article-content"><multiline label="Description">Enter your description</multiline></div>                                            </td>
                                        </tr>
                                        <tr><td class="w280" width="280" height="10"></td></tr>
                                    </tbody></table>                                </td>
                                <td width="20" valign="top"><table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
                                  <!--DWLayoutTable-->
                                  <tr>
                                    <td width="20" height="20" valign="top" bgcolor="#FFFFFF"><img src="images/spacer.jpg" width="20" height="20" /></td>
                                  </tr>
                                  <tr>
                                    <td height="68" valign="bottom" bgcolor="#FFFFFF" style="background-image:url(images/line.jpg); background-repeat:repeat-y;"><img src="images/spacer.jpg" width="20" height="20" /></td>
                                  </tr>
                                </table></td>
                                <td width="280" valign="top" class="w280">
                                    <table class="w280" width="280" cellpadding="0" cellspacing="0" border="0">
                                        <tbody><tr>
                                            <td class="w280" width="280"><img editable="true" label="Image" class="w280" width="280" border="0"></td>
                                        </tr>
                                        <tr><td class="w280" width="280" height="10"></td></tr>
                                        <tr>
                                            <td class="w280" width="280">
                                                <div align="center" class="article-content"><multiline label="Description">Enter your description</multiline></div>                                            </td>
                                        </tr>
                                        <tr><td class="w280" width="280" height="10"></td></tr>
                                    </tbody></table>                                </td>
                            </tr>
                        </tbody></table>
                    </layout>
                                        
                    
                    <layout label="Row of three images">
                        <table class="w580" width="580" cellpadding="0" cellspacing="0" border="0">
                          <!--DWLayoutTable-->
                            <tbody><tr>
                                <td width="180" height="88" valign="top" class="w180">
                                    <table class="w180" width="180" cellpadding="0" cellspacing="0" border="0">
                                        <tbody><tr>
                                            <td class="w180" width="180"><img editable="true" label="Image" class="w180" width="180" border="0"></td>
                                        </tr>
                                        <tr><td class="w180" width="180" height="10"></td></tr>
                                        <tr>
                                            <td class="w180" width="180">
                                                <div align="center" class="article-content"><multiline label="Description">Enter your description</multiline></div>                                            </td>
                                        </tr>
                                        <tr><td class="w180" width="180" height="10"></td></tr>
                                    </tbody></table>                                </td>
                                <td width="20" valign="top"><table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
                                  <!--DWLayoutTable-->
                                  <tr>
                                    <td width="20" height="20" valign="top" bgcolor="#FFFFFF"><img src="images/spacer.jpg" width="20" height="20" /></td>
                                </tr>
                                  <tr>
                                    <td height="68" valign="bottom" bgcolor="#FFFFFF" style="background-image:url(images/line.jpg); background-repeat:repeat-y;"><img src="images/spacer.jpg" width="20" height="20" /></td>
                                </tr>
                                </table>                                </td>
                                <td width="180" valign="top" class="w180">
                                    <table class="w180" width="180" cellpadding="0" cellspacing="0" border="0">
                                        <tbody><tr>
                                            <td class="w180" width="180"><img editable="true" label="Image" class="w180" width="180" border="0"></td>
                                        </tr>
                                        <tr><td class="w180" width="180" height="10"></td></tr>
                                        <tr>
                                            <td class="w180" width="180">
                                                <div align="center" class="article-content"><multiline label="Description">Enter your description</multiline></div>                                            </td>
                                        </tr>
                                        <tr><td class="w180" width="180" height="10"></td></tr>
                                    </tbody></table>                                </td>
                                <td width="20" valign="top"><table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
                                  <!--DWLayoutTable-->
                                  <tr>
                                    <td width="20" height="20" valign="top" bgcolor="#FFFFFF"><img src="images/spacer.jpg" width="20" height="20" /></td>
                                  </tr>
                                  <tr>
                                    <td height="68" valign="bottom" bgcolor="#FFFFFF" style="background-image:url(images/line.jpg); background-repeat:repeat-y;"><img src="images/spacer.jpg" width="20" height="20" /></td>
                                  </tr>
                                </table></td>
                                <td width="180" valign="top" class="w180">
                                    <table class="w180" width="180" cellpadding="0" cellspacing="0" border="0">
                                        <tbody><tr>
                                            <td class="w180" width="180"><img editable="true" label="Image" class="w180" width="180" border="0"></td>
                                        </tr>
                                        <tr><td class="w180" width="180" height="10"></td></tr>
                                        <tr>
                                            <td class="w180" width="180">
                                                <div align="center" class="article-content"><multiline label="Description">Enter your description</multiline></div>                                            </td>
                                        </tr>
                                        <tr><td class="w180" width="180" height="10"></td></tr>
                                    </tbody></table>                                </td>
                            </tr>
                        </tbody></table>
                    </layout>
                                        
                    
                    <layout label="Row of four images">
                        <table class="w580" width="580" cellpadding="0" cellspacing="0" border="0">
                          <!--DWLayoutTable-->
                            <tbody><tr>
                                <td width="130" height="88" valign="top" class="w130">
                                    <table class="w130" width="130" cellpadding="0" cellspacing="0" border="0">
                                        <tbody><tr>
                                            <td class="w130" width="130"><img editable="true" label="Image" class="w130" width="130" border="0"></td>
                                        </tr>
                                        <tr><td class="w130" width="130" height="10"></td></tr>
                                        <tr>
                                            <td class="w130" width="130">
                                                <div align="center" class="article-content"><multiline label="Description">Enter your description</multiline></div>                                            </td>
                                        </tr>
                                        <tr><td class="w130" width="130" height="10"></td></tr>
                                    </tbody></table>                                </td>
                                <td width="20" valign="top"><table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
                                  <!--DWLayoutTable-->
                                  <tr>
                                    <td width="20" height="20" valign="top" bgcolor="#FFFFFF"><img src="images/spacer.jpg" width="20" height="20" /></td>
                                  </tr>
                                  <tr>
                                    <td height="68" valign="bottom" bgcolor="#FFFFFF" style="background-image:url(images/line.jpg); background-repeat:repeat-y;"><img src="images/spacer.jpg" width="20" height="20" /></td>
                                  </tr>
                                </table></td>
                                <td class="w130" width="130" valign="top">
                                    <table class="w130" width="130" cellpadding="0" cellspacing="0" border="0">
                                        <tbody><tr>
                                            <td class="w130" width="130"><img editable="true" label="Image" class="w130" width="130" border="0"></td>
                                        </tr>
                                        <tr><td class="w130" width="130" height="10"></td></tr>
                                        <tr>
                                            <td class="w130" width="130">
                                                <div align="center" class="article-content"><multiline label="Description">Enter your description</multiline></div>                                            </td>
                                        </tr>
                                        <tr><td class="w130" width="130" height="10"></td></tr>
                                    </tbody></table>                                </td>
                                <td width="20" valign="top"><table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
                                  <!--DWLayoutTable-->
                                  <tr>
                                    <td width="20" height="20" valign="top" bgcolor="#FFFFFF"><img src="images/spacer.jpg" width="20" height="20" /></td>
                                  </tr>
                                  <tr>
                                    <td height="68" valign="bottom" bgcolor="#FFFFFF" style="background-image:url(images/line.jpg); background-repeat:repeat-y;"><img src="images/spacer.jpg" width="20" height="20" /></td>
                                  </tr>
                                </table></td>
                                <td class="w130" width="130" valign="top">
                                    <table class="w130" width="130" cellpadding="0" cellspacing="0" border="0">
                                        <tbody><tr>
                                            <td class="w130" width="130"><img editable="true" label="Image" class="w130" width="130" border="0"></td>
                                        </tr>
                                        <tr><td class="w130" width="130" height="10"></td></tr>
                                        <tr>
                                            <td class="w130" width="130">
                                                <div align="center" class="article-content"><multiline label="Description">Enter your description</multiline></div>                                            </td>
                                        </tr>
                                        <tr><td class="w130" width="130" height="10"></td></tr>
                                    </tbody></table>                                </td>
                                <td width="20" valign="top"><table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
                                  <!--DWLayoutTable-->
                                  <tr>
                                    <td width="20" height="20" valign="top" bgcolor="#FFFFFF"><img src="images/spacer.jpg" width="20" height="20" /></td>
                                  </tr>
                                  <tr>
                                    <td height="68" valign="bottom" bgcolor="#FFFFFF" style="background-image:url(images/line.jpg); background-repeat:repeat-y;"><img src="images/spacer.jpg" width="20" height="20" /></td>
                                  </tr>
                                </table></td>
                                <td class="w130" width="130" valign="top">
                                    <table class="w130" width="130" cellpadding="0" cellspacing="0" border="0">
                                        <tbody><tr>
                                            <td class="w130" width="130"><img editable="true" label="Image" class="w130" width="130" border="0"></td>
                                        </tr>
                                        <tr><td class="w130" width="130" height="10"></td></tr>
                                        <tr>
                                            <td class="w130" width="130">
                                                <div align="center" class="article-content"><multiline label="Description">Enter your description</multiline></div>                                            </td>
                                        </tr>
                                        <tr><td class="w130" width="130" height="10"></td></tr>
                                    </tbody></table>                                </td>
                            </tr>
                        </tbody></table>
                    </layout>                                        
                </repeater>            </td>
            <td class="w30" width="30"></td>
        </tr>
    </tbody></table>
</td></tr>
                <tr><td height="61" valign="top" bgcolor="#ffffff" class="w640"><table width="100%" border="0" cellpadding="0" cellspacing="0">
                  <!--DWLayoutTable-->
                  <tr class="w640">
                    <td width="640" height="61" valign="top" class="w580"><img src="images/Ice_199.jpg" width="640" height="61" /></td>
                  </tr>
                  <!--DWLayoutTable-->
                  
                </table></td></tr>
                <tr>
                  <td height="1" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
                    <!--DWLayoutTable-->
                    <tr class="w640">
                      <td width="640" height="1"></td>
                    </tr>
                    
                    <!--DWLayoutTable-->
                    
                  </table></td>
                </tr>
                <tr>
                  <td height="14"></td>
                </tr>
                <tr>
                  <td height="152" valign="top" class="w640">
                    <table id="footer" class="w640" width="640" cellpadding="0" cellspacing="0" border="0" bgcolor="#e2e2e2">
                      <!--DWLayoutTable-->
                      <tbody><tr><td width="30" height="13"></td>
                          <td width="360"></td>
                        <td width="220"></td>
              <td width="30"></td>
                      </tr>
                        <tr>
                          <td height="124">&nbsp;</td>
                          <td valign="top" class="w580">                  
                  <multiline>
                    <p align="left" class="footer-content-left"><strong>Open Mon-Fri 10am-9pm &amp; Sat 10am-8pm</strong><br />
                    To make sure our emails reach your inbox, please add enews@liquorsalescostco.com to your email address book.</p>
                  </multiline>
                  <div class="footer-link"><br />
                    <br />
                    <a href="http://liquorsalescostco.com/" target="_blank">Subscribe</a> | <preferences>Edit Your Subscription</preferences> 
                    | 
                    <unsubscribe>Unsubscribe</unsubscribe>
                  </div>
                  </p>
                  </span></td>
              <td valign="top" class="w0">
                
                            <multiline>
                              <p align="right" class="footer-content-right"><span class="footer-content-right2"><a href="http://www.mapquest.com/maps?city=Austin&amp;state=TX&amp;address=10401+Research+Blvd" target="_blank">North </a>
                                  <bold>512.795.9226</bold>
                                  <br />
                                  <a href="mailto:westbev41@sbcglobal.net" target="_blank">Email Store</a><br />
                                  <a href="http://www.mapquest.com/maps?city=Austin&amp;state=TX&amp;address=4301+W+William+Cannon" target="_blank">South</a>
                                  <bold>512.358.0639</bold>
                                  <br />
                                  <span class="footer-content-right1"><a href="mailto:wb42@att.net" target="_blank">Email Store</a></span></span></p>
                        </multiline></td>
              <td></td>
                        </tr>
                        
                        
                        <tr><td height="15" class="w30"></td>
                          <td class="w30"></td>
                          <td class="w0"></td>
                          <td class="w0"></td>
                        </tr>
                      </tbody>
                                                                          </table></td>
                </tr>
                <tr>
                  <td height="107">&nbsp;</td>
                </tr>
            </tbody></table>
      </td>
    </tr>
</tbody></table></body></html>
Alex I., 4 years ago

Just thought I'd touch base - haven't had the time to check this yet, sorry!

Star Beverage Star Beverage, 4 years ago

I have all but given up on this one. If I can't figure it out pretty soon we may just go a different route. Would be pretty cool to understand this though.

Alex I., 4 years ago

Have you got the absolute image paths please?
Kinda hard to suss out the issue with loads of broken images everywhere :-)

Star Beverage Star Beverage, 4 years ago

I will need to host it somewhere, let me host it on one of my servers and I will get back to you.

roshodgekiss roshodgekiss, 4 years ago

Hey again, it may be easiest if you could kindly contact our team with a link to a campaign in your account where this has been occurring. Then we'll be able to send a test and see what's going on. Sorry about the delayed response here!


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor

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