Sidebar images and Outlook/IE problem?

I have a template that has sidebar on the right and there I would like to place an "imagesrc link" for customer to add image. Other email clients and browsers seem to work just fine, but Outlook 2007 expand the sidebar and place image and text side by side and all IE versions hide the text under the image.

Any idea how to fix this?

J-P, 6 years ago

Anyone, please help?

Any idea how to get full width image in sidebar, from editor?

davidaf davidaf, 6 years ago

J-P,

Can you post the code you are using for the image and text? It would be helpful for us to see how you've encoded it.


The Campaign Monitor Blog – HTML email smarts to go with your good looks
J-P, 6 years ago

Here is the original code. You can open that template from first post in Firefox and IE and you will see the difference. Same problem goes also with Outlook.

<html lang="en">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <title>*Customer name here*</title>
   <style type="text/css" media="screen">
      body {
         background-color: #b9bbc8;
         margin: 0;
         padding: 0;
      }

      a img {
         border: none;
      }

      a {
         border: none;
      }

      td.permission {
         padding: 10px 0 10px 0;
      }

      .permission {
         font-family: 'Lucida Grande';
         font-size: 11px;
         color: #333333;
         padding: 4px 0 4px 0;
      }

      .permission a {
         color: #333333;
      }

      .permission p {
         margin: 0 0 4px 0;
      }

      .logo {
         background-color: #ffffff;
      }    

      .header {
         background-color: #e8f4ff;
      }

      .header h1 {
          font-family: Verdana;
          font-size: 32px;
          font-weight: normal;
          color: #9f003f;
          display: inline;
          text-align: left;}        

      .body {
         background-color: #ffffff;
      }

      td.sidebar {
          padding: 22px 10px 10px 10px;
        background-color: #ecf7fd;
      }
      
      .sidebar img.inline {
        background-color: #ffffff;
          border: 1px solid #dedede;
          padding: 4px;
      }
      
      .sidebar h1 {
         font-family: Verdana;
         font-size: 18px;
         font-weight: bold;
         color: #3d82c5;
         padding: 10px 0 0 0;
         text-align: left;
      }      

      .sidebar h2 {
         font-family: Verdana;
         font-size: 13px;
         font-weight: bold;
         color: #3d82c5;
         padding: 10px 0 0 0;
         text-align: left;
      }
      
      .sidebar h2 a {
         font-family: Verdana;
         font-size: 13px;
         font-weight: bold;
         color: #3d82c5;
         text-align: left;
      }
      
      .sidebar h3 {
         font-family: Verdana;
         font-size: 10px;
         color: #ffffff;
         margin: 0 0 6px 0;
         text-align: left;
      }

      .sidebar h2.issue {
         color: #000000;
         margin: 0 0 10px 10px;
      }

      .sidebar ul {
         font-family: 'Verdana';
         font-size: 11px;
         line-height: 14px;
         color: #2679b9;
         margin: 0 0 10px 25px;
         padding: 0;
         text-align: left;
      }
      
       .sidebar ol {
         font-family: 'Verdana';
         font-size: 11px;
         line-height: 14px;
         color: #2679b9;
         margin: 0 0 10px 25px;
         padding: 0;
         text-align: left;
      }

      .sidebar ul a {
         font-family: 'Verdana';
         font-size: 11px;
         line-height: 14px;
         color: #2679b9;
         margin: 0;
         padding: 0;
         text-align: left;
      }
      
      .sidebar ol a {
         font-family: 'Verdana';
         font-size: 11px;
         line-height: 14px;
         color: #2679b9;
         margin: 0;
         padding: 0;
         text-align: left;
      }
      
      .sidebar ul li {
          margin: 0;
      }
      
      .sidebar ol li {
          margin: 0;
      }
      
      .sidebar p {
         font-family: 'Verdana';
         font-size: 11px;
         line-height: 14px;
         color: #393939;
         margin: 5px 0 5px 0;
         text-align: left;
      }

      td.sidebg {
         border-top: dashed 1px #8aadcf;
         padding-bottom:10px;
      }
      
      td.sidebg p {
         padding: 10px 0;
      }

      td.mainbar {
          padding: 22px 10px 0 20px;
      }

      .mainbar p {
          font-family: 'Verdana';
          font-size: 11px;
        line-height: 14px;
          color: #393939;
          margin: 0 0 14px 0;
          text-align: left;
      }
      
      .mainbar ul {
          font-family: 'Verdana';
          font-size: 11px;
        line-height: 14px;
          color: #3d82c5;
          margin: 0 0 14px 0;
          text-align: left;
      }
      
      .mainbar ul a {
          font-family: 'Verdana';
          font-size: 11px;
        line-height: 14px;
          color: #9f003f;
          margin: 0 0 14px 0;
          text-align: left;
      }
      
      .mainbar ol {
          font-family: 'Verdana';
          font-size: 11px;
        line-height: 14px;
          color: #3d82c5;
          margin: 0 0 14px 0;
          text-align: left;
      }
      
      .mainbar ol a {
          font-family: 'Verdana';
          font-size: 11px;
        line-height: 14px;
          color: #9f003f;
          margin: 0 0 14px 0;
          text-align: left;
      }

      .mainbar p.first {
          margin-top: 10px;
      }
      
      .mainbar h2 {
          font-family: 'Verdana';
          font-size: 16px;
          color: #9f003f;
          padding: 10px 0 0 0;
          margin: 0 0 16px 0;
      }

      .mainbar h2 a {
          font-family: 'Verdana';
          font-size: 16px;
          color: #9f003f;
          text-decoration: none;
          font-style: normal;
      }

      .mainbar a {
          font-family: 'Verdana';
          font-size: 11px;
          color: #9f003f;
          font-style: italic;
      }

      .mainbar a.center {
          font-size: 12px;
          text-align: center;
          display: block;
          color: #999999;
          padding: 8px 0 12px 0;
          text-decoration: none;
      }

      .mainbar img.inline {
          border: 1px solid #dedede;
          padding: 4px;
      }
      
      td.footer {
        background-color: #9f003f;
      }
      
      .footer p {
          font-family: 'Verdana';
          font-size: 11px;
        line-height: 14px;
          color: #ffffff;
          text-align: center;
      }
      
      .footer a {
          font-family: 'Verdana';
          font-size: 11px;
          color: #ffffff;
      }

   </style>
</head>
<body>

<table width="100%" cellspacing="0" cellpadding="0" bgcolor="#b9bbc8">
   <tr>
      <td align="center">
         <table width="600" cellspacing="0" cellpadding="0">
            <tr>
               <td align="center" class="permission">
                  <p>Vaikeuksia viestin lukemisessa? <webversion>Lue se internet selaimessasi</webversion>. Etk&ouml; halua viestej&auml; jatkossa? <unsubscribe>Poista itsesi listalta</unsubscribe>.</p>
               </td>
            </tr>
            <tr>
               <td height="51" align="right" class="logo">
                  <table width="600" border="0" cellspacing="0" cellpadding="0">
                     <tr>
                        <td><img src="customer_logo.gif" width="600" height="80" alt="*Customer name here*"></td>
                     </tr>
                  </table>
               </td>
            </tr>
            <tr>
               <td height="217" align="left" class="header">
                  <table width="600" border="0" cellspacing="0" cellpadding="0">
                     <tr>
                        <td><img src="header.jpg" width="600" height="217" alt="*Customer name here*"></td>
                     </tr>
                  </table>
               </td>
            </tr>
         </table>
      </td>
   </tr>
   <tr>
      <td align="center">
         <table width="600" cellspacing="0" cellpadding="0" class="body">
            <tr>                             
               <td align="left" valign="top" width="410" class="mainbar">
                  <repeater toc='true'>
                  <h2><$title link="true" default='Anna kappaleen otsikko.'$></h2>                  
                  <img src="<$imagesrc link='false'$>" width="130" height="130" alt="Inline" align="right" class="inline" vspace="4" hspace="4">
                  <$description default='<p>Lis&auml;&auml; sis&auml;lt&ouml;&auml; t&auml;h&auml;n.</p>'$>
                  <br />
                  </repeater>
               </td>
                <td align="center" valign="top" width="150" class="sidebar">
                    <repeater>
                        <h2><$title link='true' default='Anna kappaleen otsikko.'$></h2>
                        <img src="<$imagesrc link='false'$>" width="130" height="130" alt="Inline" align="right" class="inline" vspace="4" hspace="4">
                        <$description default='<p>Lis&auml;&auml; sis&auml;lt&ouml;&auml; t&auml;h&auml;n.</p>'$>
                    </repeater>
                    <br />
                  <table border="0" cellspacing="0" cellpadding="0">
                     <tr>
                        <td class="sidebg" align="center">
                           <p>Osoitetietosi on saatu asiakas- ja markkinointi- rekisterist&auml;mme. Mik&auml;li haluat poistaa itsesi listalta, klikkaa alla olevaa painiketta.</p>
                           <unsubscribe><img src="unsubscribe.gif" width="105" height="27" alt="Unsubscribe"></unsubscribe>
                        </td>
                     </tr>
                  </table>
               </td>               
            </tr>
            <tr>
               <td colspan="2" align="center">
                  <table width="600" border="0" cellspacing="0" cellpadding="0">
                     <tr>
                        <td class="footer" width="600" height="30" align="left">
                        <p>*Customer details here*</p>
                        </td>
                     </tr>
                  </table>
               </td>
            </tr>
         </table>
      </td>
   </tr>
</table>

</body>
</html>
BThies BThies, 6 years ago

Padding & Margin are not fully supported -
• Use nested tables and/or additional <td>'s to recreate horizontal spacing
• Use <div>'s to recreate vertical spacing

'Lucida Grande' is not a universally supported font.  You'll want to specify back-ups such as Verdana, Arial, Helvetica and sans-serif.  Having at least two back-ups is recommended.

All images should either have "display:block" or "display:inline" depending on how they're positioned within the document.

All <table>'s and <td>'s should have a width specified, and the columns must add up correctly.  Many e-mail clients are not forgiving if you're off by just a pixel.  Padding, margins and borders can easily throw the numbers off.


Brian Thies
Professional Email Developer
Thies Publishing
J-P, 6 years ago

I placed those items into their own table rows so that seemed to work about ok.

<repeater>
                    <table width="150" border="0" cellspacing="0" cellpadding="0">
                    <tr>
                     <td align="left" valign="top" height="25"><h2><$title link='true' default='Anna kappaleen otsikko.'$></h2></td>
                     </tr>
                     <tr>
                     <td><img src="<$imagesrc link='false'$>" width="130" height="130" alt="Inline" align="center" class="inline" vspace="4" hspace="4"></td>
                     </tr>
                     <tr>
                     <td><$description default='<p>Lis&auml;&auml; sis&auml;lt&ouml;&auml; t&auml;h&auml;n.</p>'$></td>
                     </tr>
                     </table>
                    </repeater>

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