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.

 
   
Outlook Tables change (Gmail is fine)

ajcoder

Newbie
Total Posts:  13
Posted: 26 January 2012 02:31 PM

I have an issue with tables in outlook 07. When I send out my email, the column on the left changes to be larger then it should.

When it goes to Gmail, it looks fine. The left column should be a bit smaller then the right column. I have created four cells so that I can have some white space on each side. Because I need some color in the left cell, I don’t want it to go out to the edge.
What can I do to fix this? I’ve tried changing the width, removing padding, removing table width and putting the width in style=”...”.

<table id="main_tab" cellpadding="0" cellspacing="0">
  <
tr>
    <
td colspan="4" id="header" title="Masthead">
    
header graphic here
    
</td>
  </
tr>
       <
tr>
          <
td width="12px">&nbsp;</td>
         <
td width="196" id="first_col" title="First column" style="padding: 25px 10px 10px 10px"   this column has a background color </td>
          
          
          <
td id="second_col" title="Second column" style="padding: 10px 0px 0px 10px;" width="380">
            
text here
          
</td>
          <
td width="12px">&nbsp;</td>
          </
tr>
    <
tr>
          <
td width="12px">&nbsp;</td>
          <
td colspan="2" id="row" style="padding: 0px 10px 30px 10px" dtitle="Row" width="576px">text
                  
</td>
          <
td width="12px">&nbsp;</td>
        </
tr>
  <
tr>
    <
td  colspan="4" id="footer" style="all" title="Footer">
     
footer graphic here
    
</td>
  </
tr>
</
table

 

Michelle Klann

Avatar
Administrator
Total Posts:  204
Posted: 27 January 2012 09:31 AM
[ # 1 ]

Hello,

Yeah, this issue can be really frustrating and it literally brings me back to 1995, the days we had to use clear gifs EVERYWHERE!

Unfortunately Outlook completely converts your code and it’s not always clear what it’s going to do.  To see the interpretation, you can run and Acid test through our system and click on the “Client Interpretation” tab when viewing your result for Outlook 2007 or 2010. 

For exact results, here’s what you can do:  Create a clear (transparent) gif image and place it at the top or bottom of each of your table cells.  This forces the cell to be the exact width that you want it to be. 

Unfortunately with Outlook, you can’t always get away with using a 1X1 gif and stretching it using width and height attributes, instead, you’ll have to create a unique gif image for unique td width. In your example above, you’d have to create a 12X1 and a 196X1 gif image.  Place them in the second TR, there’s no need to place them in multiple TR’s - just one will dictate the rest of the table.

Obviously you’d avoid left and right cell padding when doing this.  The objective is to use the clear gifs for controlling your spacing.

Hope this helps!
Miki