VML Height in Percent?

Hello,

I am trying to code an email to be viewed in Outlook 2007/2010 correctly. One of my images in a border that needs to flow the length of the content. Setting the height in pixels will work but the border won't be consistent when testing in all of the popular email outlets.

I was hoping I might be able to use a height percentage as opposed to a fixed height so that it will fluctuate slight to cater to the fluctuation in content across all outlets. I hope this makes sense.

I know the VML hack has a mso-width-percent option, but I tried to do this for height and it didn't work.

Any suggestions? Any and all help will be greatly appreciated.

Stephen, 1 year ago

Hi amber2403,

Thanks so much for getting in touch and it's a great question, however just to let you know, it can be problematic to try to resize images in Outlook, as different versions don't always handle percentage-based  images well. In addition, as per this article, very tall images may be clipped as a result.

In addition, if you're attempting to proportionally resize images in a template-based campaign, then this isn't always possible, as if you import a large image into your campaign for example (and your image is wider than your editable image region), then we'll resize the image automatically for you, to ensure it matches the max width of your editable image tag, however if you're also forcing this image to be 100% tall as well, then this could result in the image being stretched and looking incorrect, proportionally.

If you could perhaps post the code for your campaign/template here or send it to our support@campaignmonitor.com address however, then we’ll be happy to take a look at it, to see if there’s another way of tackling this, so look forward to hearing from you! :)

amber2403, 1 year ago

Here's the full code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns:v="urn:schemas-microsoft-com:vml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>UNTITLED DOCUMENT</title>

<style type="text/css">
@media only screen and (max-width:480px) {
/* mobile-specific CSS styles go here */
table[class=email], table[class=email-content] {clear:both; width:320px !important;}

  <!--  BODY {
         width: 100%;
         height: 100%;
         color: #505050;
         text-align: center;
         word-break: break-all;
       }

     
  .TABLE {
           width: 100%;
           height: 100%;
           color: #505050;
           font-family: "Calibri", Arial, sans-serif;
           text-align: center;
         }


  .HEADER {
            width: 100%;
            height: 100%;
            color: #505050;
            font-family: "Calibri", Arial, sans-serif;
            font-size: 16pt;
            font-weight: bold;
            font-style: normal;
            text-align: center;
          }

  .PARAGRAPH {
               width: 100%;
               height: 100%;
               color: #505050;
               font-family: "Calibri", Arial, sans-serif;
               font-size: 11pt;
               font-weight: normal;
               font-style: normal;
               text-align: justify;
             }
  -->
  </style>

</head>


<body>

  <!-- Do NOT edit the content inside these tags -->

  <!-- First HTML table acts as a pseudo BODY tag to protect email inside -->

  <table width="99%" height="99%" cellpadding="0" cellspacing="0" border="0">
  <tr>
  <td align="center" valign="top">

   
    <!-- Second HTML table is the email itself -->

    <table class="TABLE" align="center" cellpadding="0" cellspacing="0" border="0">
    <tr>
    <td width="55" height="100%" align="center" valign="top" bgcolor="#ffffff" style="background-image: url('https://gallery.mailchimp.com/c0ee49f34b/images/686ace28-d67f-4f0b-b515-e56e7bd4832d.jpg'); background-repeat: repeat-y; border-collapse: collapse; width: 55px; height: 100%;" background="https://gallery.mailchimp.com/c0ee49f34b/images/686ace28-d67f-4f0b-b515-e56e7bd4832d.jpg">

    <!--[if gte mso 9]>
    <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width: 55px; mso-height-percent: 1000;">
    <v:fill type="tile" src="https://gallery.mailchimp.com/c0ee49f34b/images/686ace28-d67f-4f0b-b515-e56e7bd4832d.jpg" color="#ffffff" />
    </v:rect>
    <v:shape id="Border-Stripe" style="position: absolute; width: 55px; height: 100%;">
    <![endif]-->

    <p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</p>

    <!--[if gte mso 9]>
    </v:shape>
    <![endif]-->

    </td>


    <td width="550" height="180" align="center" valign="top" bgcolor="#ffffff" style="background-image: url('https://gallery.mailchimp.com/c0ee49f34b/images/5e573911-3771-482b-adcc-cd953b4fff85.jpg'); background-repeat: no-repeat; border-collapse: collapse; width: 550px; height: 180px;" background="https://gallery.mailchimp.com/c0ee49f34b/images/5e573911-3771-482b-adcc-cd953b4fff85.jpg">

    <!--[if gte mso 9]>
    <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width: 550px; height: 180px;">
    <v:fill type="tile" src="https://gallery.mailchimp.com/c0ee49f34b/images/5e573911-3771-482b-adcc-cd953b4fff85.jpg" color="#ffffff" />
    </v:rect>
    <v:shape id="Header-Image" style="position: absolute; width: 545px; height: 180px;">
    <![endif]-->

    <img src="https://gallery.mailchimp.com/c0ee49f34b/images/5e573911-3771-482b-adcc-cd953b4fff85.jpg">

    <!--[if gte mso 9]>
    </v:shape>
    <![endif]-->

  <!-- Do NOT edit the content inside these tags -->


      <!-- Third HTML table is the left column of content -->
      <table class="HEADER" align="center" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse;">
      <tr>
      <td width="580" align="center" valign="top">

      <p style="font-family: Calibri, Arial, sans-serif; font-size: 14pt; font-weight: bold; font-style: normal; color: #505050; text-align: center;">
     
      <!-- EDIT TEXT BETWEEN THESE TAGS -->

      CONTENT HEADER

      <!-- EDIT TEXT BETWEEN THESE TAGS -->

      </p>
      </td>
      </tr>
      </table>
      <!-- Close third HTML table -->


      <!-- Fourth HTML table is the right column of content -->
      <table class="PARAGRAPH" align="center" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse;">
      <tr>
      <td width="530" align="justify" valign="top">

      <p style="font-family: Calibri, Arial, sans-serif; font-size: 11pt; font-weight: normal; font-style: normal; color: #505050; text-align: justify;">

      <!-- EDIT TEXT BETWEEN THESE TAGS -->

      MAIN CONTENT <br /><br />
     
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc et aliquet velit. Sed in auctor magna, in tincidunt enim. Praesent molestie aliquam magna, id interdum est suscipit ac. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam vitae pretium quam. Morbi at arcu at urna lacinia iaculis. Suspendisse sodales elit at tristique placerat. Sed luctus nibh tincidunt nisi consequat, vitae sagittis ipsum dignissim. Ut efficitur euismod massa, nec bibendum metus elementum nec. Praesent sit amet enim quis risus lacinia viverra sit amet a sapien. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;

Nulla fermentum maximus est quis ultrices. Fusce sed posuere metus. In a sapien justo. In bibendum augue non posuere ornare. Donec vel porta diam, malesuada lacinia quam. Mauris rhoncus dui eget eleifend porta. Ut tortor neque, euismod quis posuere quis, egestas sed dui.

Nulla quis fringilla velit. Aenean auctor vulputate dui, eu venenatis magna facilisis nec. Integer eget dignissim nulla, ut gravida sapien. Aenean et velit semper mauris tempus fringilla. Fusce quam nisl, feugiat vestibulum mollis eget, lobortis at felis. Suspendisse venenatis nibh quis mi lacinia, sit amet mollis erat accumsan. Suspendisse dictum non lectus non cursus. Nam maximus scelerisque commodo. Nulla ut posuere ipsum. Proin auctor lobortis pulvinar. Sed id rutrum tellus, sed tempor dui. Duis malesuada faucibus auctor. Aliquam pretium nulla nec gravida rutrum. Sed dignissim, libero a mollis rutrum, massa est aliquam justo, sed consequat leo ex in ante. Aenean quis rutrum orci.
 
      <!-- EDIT TEXT BETWEEN THESE TAGS -->

      </p>
      </td>
      </tr>
      </table>
      <!-- Close fourth HTML table -->     



    </td>
    </tr>
    </table>
    <!-- Close second HTML table -->


  </td>
  </tr>
  </table>
  <!-- Close first HTML table -->

</body>
</html>


Here's the piece I need help on so that the border flows the entire length of the main content text:

<td align="center" valign="top">

   
    <!-- Second HTML table is the email itself -->

    <table class="TABLE" align="center" cellpadding="0" cellspacing="0" border="0">
    <tr>
    <td width="55" height="100%" align="center" valign="top" bgcolor="#ffffff" style="background-image: url('https://gallery.mailchimp.com/c0ee49f34b/images/686ace28-d67f-4f0b-b515-e56e7bd4832d.jpg'); background-repeat: repeat-y; border-collapse: collapse; width: 55px; height: 100%;" background="https://gallery.mailchimp.com/c0ee49f34b/images/686ace28-d67f-4f0b-b515-e56e7bd4832d.jpg">

    <!--[if gte mso 9]>
    <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width: 55px; mso-height-percent: 1000;">
    <v:fill type="tile" src="https://gallery.mailchimp.com/c0ee49f34b/images/686ace28-d67f-4f0b-b515-e56e7bd4832d.jpg" color="#ffffff" />
    </v:rect>
    <v:shape id="Border-Stripe" style="position: absolute; width: 55px; height: 100%;">
    <![endif]-->

    <p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</p>

    <!--[if gte mso 9]>
    </v:shape>
    <![endif]-->

    </td>

Another reason this is necessary is that this main content will change so it's tedious to go and do a lot of height adjusting to get it to fit just right again each time it does.

Thanks for the response. I appreciate your willingness to help.

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
1-888-533-8098