none
Outlook 2007/2010 - Inserting table into autoshape leaves extra space

    Question

  • ((Directed to this forum by a Microsoft Support Engineer for this question))

    In Outlook 2007/2010, inserting a table into an autoshape (such as a textbox) is causing a space to appear after the table within the autoshape.  When formatting marks are turned on, you can see it's a paragraph mark, but there's no way to delete it.

    For this problem, specifying an exact height can't be used, as the autoshape text box is set to "resize shape to fit text".  Also, changing the font size of the paragraph mark doesn't eliminate the space completely.

    Looking for anyone who may know a workaround to remove the extra space.  (An mso style, VML setting, etc.)

    Here are the steps to recreate the issue:

    1.) Start with a new email, go to "Insert", click on "Shapes", select the first "basic shape" (The one with the letter "A" in it), and draw a large box.

    2.) Now right click on the autoshape, go to "Format Shape", select "Text Box", check Resize shape to fit text, and set all internal margins to 0.

    3.) Click inside the autoshape, go to "Insert", click on "Table", and create a 3x1 table.

    You'll now have a single row, three column table inside the autoshape.

    The issue, however, is that there's a space below the table inside the autoshape.  It can't be deleted.  It can only be removed by highlighting the space, right clicking, going into "Font", and selecting "Hidden".

    This presents an issue for those coding custom HTML emails, as there's no way to select that space and make it hidden while coding from the ground up.  Outlook automatically adds the space after the table (within an autoshape) in a freshly coded email.

    --------------------------

    Background on the method being used:

    If you're wondering why this is being done, it's used as a vertically flexible background image solution for Campaign Monitor & MailChimp email templates.  I originally came up with a fixed background image solution using Word's VML coding.  (Link here)  Fixed vertical heights are not preferred for editable templates since the amount of content can vary.

    The original Outlook 2007/2010 background image fix/solution involved a fixed VML image (v:image) along with a fixed VML shape (v:shape) absolute positioned inside a table cell.  It worked perfectly, and as you can see the thread has over 80,000 views.  It still didn't solve the problem of vertically flexibility, as it required a set height & width.

    The latest solution (and the original problem posted) involves using a VML rectangle shape (v:rect) with a (v:fill), and a (v:textbox) with a style set to "mso-fit-shape-to-text:true".  This solved the vertical flexibility issue, but that space after the nested table (which is used for positioning) is causing problems since other email clients don't show that space.

    Consistency across email clients is the goal - and getting rid of that space below the table would solve it.

    Thank you,
    Brian

    Tuesday, April 17, 2012 1:48 PM

Answers

  • Hey Brian,

    Sorry about that – it looks like "mso-hide:all;" was stripped from the <p> tag styles, either by me or the forums. I got it working with that.

    Good to know that it works with "font-size: 0; line-height: 0;" too – thanks!

    Cheers,
    Stig

    • Marked as answer by BThies Thursday, August 29, 2013 12:50 PM
    Thursday, August 29, 2013 12:45 PM

All replies

  • Hello Brian,
     
    Thank you for your post.
     
    This is a quick note to let you know that we are performing research on this issue.

    Thank you for your understanding and support.


    William Zhou

    TechNet Community Support

    Monday, April 23, 2012 6:33 AM
    Moderator
  • Hi Brian,

    While I understand you are doing this formatting in the body of e-mail messages, do you know if this problem happens with Word itself? If so, then this would be best handled by someone in Word, so I'm just trying to understand the scope of this issue better.

    Thanks!


    Bill Jacob - Microsoft Customer Service & Support - Developer Messaging

    Monday, April 23, 2012 2:59 PM
  • Hi Bill,

    Yes, this occurs in Word as well.

    Thank you,
    Brian

    Monday, April 23, 2012 3:29 PM
  • Hi Brian,

    A table in Word/Outlook is contained within a paragraph so there will be a ending paragraph mark that is not deletable.

    One suggestion would be to set the height of the textbox to be close to the height of the table row.

    Another option is to not use textboxes but simply nest tables.


    Please remember to click “Mark as Answer” on the post that helps you, and to click “Unmark as Answer” if a marked post does not actually answer your question. This can be beneficial to other community members reading the thread. Regards, Harold Kless Microsoft Online Community Support

    Monday, April 23, 2012 4:02 PM
  • Hi Harold,

    As mentioned at the bottom of the original post, this is being used as a vertically flexible background solution. Therefore, a set height can't be used.

    If it's contained within a paragraph, shouldn't the bottom margin have the capability of being set to 0 to remove the space?

    Thanks,
    Brian

    Monday, April 23, 2012 4:09 PM
  • BTW - <table> within <p> is not a valid setup, and I'm not sure how that was approved for use in Outlook.  A paragraph should never contain other block-level elements.   That's HTML 101.
    Monday, April 23, 2012 4:19 PM
  • Hi Brian,

    I think we can agree that Word is not the best HTML editor.

    With that being said, you could set the font size of that final paragraph to 1.


    Please remember to click “Mark as Answer” on the post that helps you, and to click “Unmark as Answer” if a marked post does not actually answer your question. This can be beneficial to other community members reading the thread. Regards, Harold Kless Microsoft Online Community Support

    Monday, April 23, 2012 5:14 PM
  • Hi Harold,

    Yes, we can definitely agree on that.

    In terms of the paragraph font sizing, the main problem would be that the paragraph tag doesn't exist in the original coded email.  It's the Word/Outlook rendering engine that seems to be interpreting that space after the table.  If Word/Outlook is assuming a paragraph tag around the table, there wouldn't be any way to style that non-existent tag.

    B.

    Monday, April 23, 2012 5:30 PM
  • Hi Brian,

    Word is basically a paragraph-centric application in terms of how it handles formatting and document components. There always needs to be one paragraph in a document and a table will always have a paragraph associated with it. In this case, since Word is converting the HTML into Word-style formatting in the user interface, there will always be that paragraph mark that gets added after the table. As you noted, there is really nothing you can do about that since that's coming from the HTML->Word conversion. The only thing we can recommend would be to take this limitation into account and perhaps re-format the content to somehow avoid this particular scenario.

    I realize this is not what you wanted to hear, but unfortunately I don't really see any other option here.


    Bill Jacob - Microsoft Customer Service & Support - Developer Messaging

    • Marked as answer by BThies Monday, April 23, 2012 6:56 PM
    • Unmarked as answer by BThies Thursday, August 29, 2013 12:42 PM
    Monday, April 23, 2012 6:41 PM
  • Hi Bill,

    Thank you for the information.

    If you do happen to have any pull around there.... please pass along to the Outlook team that they should at least add the background style or attribute support in the next version of Outlook.  Also, remind them that VML is a dead technology, and Word is not a browser.  If IE9 is as secure as they say it is, then it should work fine as the rendering engine in future releases of Outlook!  :-)

    Cheers,
    Brian

    Monday, April 23, 2012 6:55 PM
  • Hey Brian,

    I know this is an old thread, but I seem to have found a solution to this, with a great deal of help from your description. I've run into this issue a few times, both in my own work and through enquiries I get through my tool emailbg.net. I've usually referred to this thread, but decided to try to find a fix.

    The following hint put me onto the answer:

    It can only be removed by highlighting the space, right clicking, going into "Font", and selecting "Hidden".

    Just like you said, this removes the unsightly spacing. So I did this in Word and saved the document as a web page, then eliminated superfluos code through trial and error, until I sat left with this:

    <p style="margin:0;"><o:p xmlns:o="urn:schemas-microsoft-com:office:office">&nbsp;</o:p></p>

    If you place this within the closing conditional comment, just before the end of the textbox, like so...

    <td background="http://i.imgur.com/n8Q6f.png" bgcolor="#f6f6f6" width="198" valign="top"> <!--[if gte mso 9]> <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:198px;"> <v:fill type="tile" src="http://i.imgur.com/n8Q6f.png" color="#f6f6f6" /> <v:textbox inset="0,0,0,0"> <![endif]--> <div><table><tr><td>Table content here</td></tr></table></div> <!--[if gte mso 9]> <p style="margin:0;"><o:p xmlns:o="urn:schemas-microsoft-com:office:office">&nbsp;</o:p></p> </v:textbox> </v:rect> <![endif]--> </td>

    ...which essentially inserts a paragraph below the table with Word's "Hidden" checkbox ticked.

    I hope this will be useful to Brian and others, and I'll look at adding this to the emailbg.net output soon, for flexible height background images.

    Cheers,
    Stig

    Thursday, August 29, 2013 11:33 AM
  • Hi Stig,

    I tried with that extra <p> tag but it was still showing space at the bottom.

    However, I added font-size:0 and line-height:0 to that tag and it worked perfectly:

    <p style="margin:0; font-size:0; line-height:0;"><o:p xmlns:o="urn:schemas-microsoft-com:office:office">&nbsp;</o:p></p>

    Thanks for your help!
    Brian

    Thursday, August 29, 2013 12:39 PM
  • Hey Brian,

    Sorry about that – it looks like "mso-hide:all;" was stripped from the <p> tag styles, either by me or the forums. I got it working with that.

    Good to know that it works with "font-size: 0; line-height: 0;" too – thanks!

    Cheers,
    Stig

    • Marked as answer by BThies Thursday, August 29, 2013 12:50 PM
    Thursday, August 29, 2013 12:45 PM