Community Forum

Over the years we have built up a community of email marketers, coders and designers that live and breathe email.

Use the Email on Acid Forum like your virtual water cooler: Stop by to discuss email code, quirky clients and fixes and post your issues (with an example of the code) for our community to offer its assistance.

 
   
Conditional Width for Img based on Cell Width in Outlook 2007-2013 ?

KennethWagner

Newbie
Total Posts:  4
Posted: 10 February 2016 04:07 AM

Hey ! I heard this was the best community to get expert input on HTML Email design ? smile

I have an issue I’m trying to tackle. For a newsletter, we are creating custom content blocks that will be dropped into a table cell. Within this block there is an image, which right now is set to width = 100%. Now the 100% width is the equivalent of either 580 or 285, depending on where it is dropped.

This works fine for all email clients, except for Outlook 2007 to 2013. I’ve tried with CSS style declarations and !important. Without luck. So now I’m wondering if there is a method wherein we can get the image to vary in size for outlook 2007-2013. Any Ideas?

Essentially the structure is like this;

<table>
  <tr>
      <td class=“Maindeal”>
        <custom type=“content” name=“Main”>
      </td>
  </tr>
  <tr>
      <td>
        <table>
          <tr>
              <td class=“sidedeal”>
                <custom type=“content” name=“side 1”>
              </td>
              <td class=“sidedeal”>
                <custom type=“content” name=“side 2”>
              </td>
          </tr>
        </table>
      </td>
  </tr>
</table>

And then we drop content in which is formatted like this;
<table>
  <tr>
      <td>
        <table width=“100%” border=“0” cellpadding=“0” cellspacing=“0”>
          <tr>
              <td class=“ImageCell”>
                [url=“www.google.com”]
                https://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg
                [/url]
              </td>
          </tr>
        </table>
      </td>
  </tr>
</table>


 

Geoff Phillips

Avatar
Moderator
Total Posts:  386
Posted: 10 February 2016 02:01 PM
[ # 1 ]

KennethWagner,
Welcome to the forum!

Yes, I have seen this kind of problem before. I would suggest that you use a little MSO conditional code to create a style block just for Outlook 07-13. In this style block, you can set a specific width on the images, and it should override the inline width if you use !important.

It should look something like…

<!--[if (gte mso 9)]>
        <
style type="text/css">
            .
outlook_580 {width580px !important;}
            
.outlook_285 {width285px !important;}
        
</style>
    <!
[endif]--> 

 

KennethWagner

Newbie
Total Posts:  4
Posted: 10 February 2016 03:15 PM
[ # 2 ]

Thanks Geoff!

Resulting structure would be something like this. It looks very similar to what I’ve tried. I just had classed called Maindeal, Sidedeal instead. However, i’m fearing the i can’t apply the class to the <td>, when there’s two nested tables inside the td and it’s inside the final table, that the img resides (client is using ExactTarget’s templates w. content blocks etc.)

Think it’ll work?

<style>
<!—[if (gte mso 9)]>
      <style type=“text/css”>
        .outlook_580 {width: 580px !important;}
        .outlook_285 {width: 285px !important;}
      </style>
  <![endif]—>
</style>
<body>
<table>
  <tr>
    <td class=“Outlook_580”>
      <table>
          <tr>
            <td>
              <table width=“100%” border=“0” cellpadding=“0” cellspacing=“0”>
                  <tr>
                    <td class=“ImageCell”>
                      [url=“www.google.com”]
                      https://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg
                      [/url]
                      </td>
                  </tr>
              </table>
            </td>
          </tr>
    </table>
    </td>
  </tr>
  <tr>
    <td>
      <table>
      <tr>
          <td class=“Outlook_280”>
        <table>
              <tr>
                <td>
                  <table width=“100%” border=“0” cellpadding=“0” cellspacing=“0”>
                      <tr>
                        <td class=“ImageCell”>
                          [url=“www.google.com”]
                          https://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg
                          [/url]
                        </td>
                  </tr>
                  </table>
                </td>
              </tr>
        </table>
          </td>
          <td class=“sidedeal”>
          <custom type=“content” name=“side 2”>
          </td>
      </tr>
      </table>
    </td>
  </tr>
</table>
</body>


 

Geoff Phillips

Avatar
Moderator
Total Posts:  386
Posted: 10 February 2016 03:20 PM
[ # 3 ]

KennethWagner,
The class would need to be applied to the image, not to a TD. Also, you should not put the conditional code into a style block, as a style block is contained within the conditional comment already.

As far as it working or not, you’ll have to test and find out! Hope this helps smile


 

KennethWagner

Newbie
Total Posts:  4
Posted: 10 February 2016 04:42 PM
[ # 4 ]

Okay - thanks smile It helps - but sadly not the desired outcome smile Essentially, what I’m hearing is that i can’t based my image’s width on the overall TD it’s in - i.e. can’t make it dynamic in the way i want to smile

But thanks though ! smile Awesome clarification speed ! smile


 

Geoff Phillips

Avatar
Moderator
Total Posts:  386
Posted: 10 February 2016 04:56 PM
[ # 5 ]

KennethWagner,
Actually, you could put the class on the TD and then use:

<!--[if (gte mso 9)]>
        <
style type="text/css">
            .
outlook_580 img {width580px !important;}
            
.outlook_285 img {width285px !important;}
        
</style>
    <!
[endif]--> 

As long as you match the correct image width to the correct TD it should work!


 

KennethWagner

Newbie
Total Posts:  4
Posted: 11 February 2016 12:08 AM
[ # 6 ]

Hmm.. i get what you’re saying, but essentially i need full code on the same TD, something like;

<td
IF Outer TD width > 300px, then class=“Outlook_580”, otherwise class = “Outlook_285”
>

It could also be based on if it is within a “name” or “id” as there’ll only ever be one Outlook_580 sized deal.

That way - the piece of content I’m dropping in, would detect whether or it is in the main deal section. The 580 section.

It is the same image i need to vary in size, depending on where it is dropped.

See here: http://screencast.com/t/OfWicSF0OS