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 displays my image inside table cell too wide.

laurieb

Newbie
Total Posts:  9
Posted: 03 November 2016 06:46 AM

I’m sure this has been repeated many times, yet with hours of Googling, I’ve still not found a workable answer.  I have an image that is 622px wide and 6px high.  I want it to display inside a table cell that is also 622px wide, but is 30px high.  (The cell is between two other cells that are 89px wide.)  I want it to be vertically aligned to the top of the cell.

I cannot get the image to display properly in Outlook.  I would think that there should be no issue, since my image is 622px wide.  It’s not as if I’m trying to get it to display smaller than it is.  However, Outlook increases my cell width so that I end up with the two side cells being less than 89px, and the center cell being more than 622px. 

Also, in Outlook, the image is not aligning to the top of the cell.

I have attached two images for comparison.  One shows how it displays in Outlook, the other shows the desired display.

Any help would be so greatly appreciated. 

I also have in my header
<!—[if gte mso 9]><xml>
<o:OfficeDocumentSettings>
  <o:AllowPNG>
  <o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml><![endif]—>

Below is my table code that applies to this section:
<tr>
              <td align=“left” valign=“top” width=“800”> 
                <table border=“1” cellpadding=“0” cellspacing=“0” width=“800”>
                    <tr>
                      <td width=89 bgcolor=”#eae9e8” align=“left” valign=“top” style=“width:89px;”></td>       
                      <td width=622 bgcolor=”#FFFFFF” height=30 align=“left” valign=“top” style=“vertical-align:top;”>ImageSourcePath/blue-line.jpg
                      </td>
                      <td width=89 bgcolor=”#eae9e8” align=“left” valign=“top” style=“width:89px;”></td>
                  </tr>
               
                </table>
              </td>
          </tr>

Image Attachments
outlook.jpgbrowser.jpg

 

Geoff Phillips

Avatar
Moderator
Total Posts:  386
Posted: 03 November 2016 06:56 AM
[ # 1 ]

laurieb,
Welcome to the forum! I can try to help you with this issue.

Can you please include a full code sample as a .html file? That way I can recreate this issue and troubleshoot it.


 

laurieb

Newbie
Total Posts:  9
Posted: 03 November 2016 08:05 AM
[ # 2 ]

Thank you so much, Geoff.  I have attached the code as an html file here.

File Attachments
mastemp2.html  (File Size: 19KB - Downloads: 579)

 

Geoff Phillips

Avatar
Moderator
Total Posts:  386
Posted: 03 November 2016 09:12 AM
[ # 3 ]

laurieb,
Do you have a version of this with working images? This version has a relative path for all images.


 

laurieb

Newbie
Total Posts:  9
Posted: 03 November 2016 09:37 AM
[ # 4 ]

Oh, I’m so sorry.  I forgot to update that before sending.  This one has absolute paths. Thank you again!

File Attachments
mastemp2.html  (File Size: 19KB - Downloads: 442)

 

Geoff Phillips

Avatar
Moderator
Total Posts:  386
Posted: 04 November 2016 04:32 AM
[ # 5 ]

laurieb,
Thank you for the code sample! What client(s) specifically are you seeing this issue in?


 

laurieb

Newbie
Total Posts:  9
Posted: 04 November 2016 04:39 AM
[ # 6 ]

Outlook 2013, which is commonly used by the users who would be viewing this.  Thanks!


 

Geoff Phillips

Avatar
Moderator
Total Posts:  386
Posted: 04 November 2016 04:52 AM
[ # 7 ]

laurieb,
I was able to fix this by making the TD with that image exactly 6px high, adding another row with just one TD at 24px high, and giving the TDs on either side rowspan=2. I have attached the code here.

Good luck and happy coding!

File Attachments
mastemp2_v2.html  (File Size: 19KB - Downloads: 366)

 

laurieb

Newbie
Total Posts:  9
Posted: 04 November 2016 05:04 AM
[ # 8 ]

Thank you, Geoff.  Unfortunately, I still am experiencing the first half of the issue.  This does fix the top-alignment issue, but both the 6px high row and the 24px high row are still too wide, as described in the original post and shown in the images I attached.  I’ve been unable to figure out how to make Outlook respect the width.  Even though the width call outs are there in the columns, AND the image is an ACTUAL WIDTH of 622px, Outlook expands the width of the image and distorts all of the column widths.

Regarding the top-alignment, apparently there is no way to get Outlook to respect a top alignment call out, I suppose.


 

Geoff Phillips

Avatar
Moderator
Total Posts:  386
Posted: 04 November 2016 06:28 AM
[ # 9 ]

laurieb,
In this test (run with the code attached), I see that the center column is exactly 622px wide (measured in Photoshop).

Is this not correct? https://www.emailonacid.com/app/acidtest/display/summary/w5vYzpvJaTsp66MICxfASHotNgACU49FgHCN4lnMTiHad/shared


 

laurieb

Newbie
Total Posts:  9
Posted: 04 November 2016 07:16 AM
[ # 10 ]

Oh, that is interesting, Geoff.  Your Outlook 2013 rendering looks as it should.  However, when I send a test email using the code to my Outlook 2013 inbox, it does not appear that way.  I have attached a screenshot of how it looks in my received email in Outlook 2013.  As you can see, the line image extends out and the two cells on either side, which should be 89px wide, are smaller than that.  I double checked by viewing the source code of the received email that it is using your revised code.

Image Attachments
Untitled.png

 

Geoff Phillips

Avatar
Moderator
Total Posts:  386
Posted: 04 November 2016 07:18 AM
[ # 11 ]

laurieb,
How are you sending the email to your Outlook 2013?

Have you tried running an auto-process test to see if we can replicate the issue?
https://www.emailonacid.com/help-center/article/getting-started/tutorial-getting-started/how-do-i-test-email-via-auto-process


 

laurieb

Newbie
Total Posts:  9
Posted: 04 November 2016 07:24 AM
[ # 12 ]

I don’t think I have access to an autoprocess address.  What I am doing is simply uploading the html file to my Linux server, using a php mail script to send it to my Outlook address, and having it render back to me in the Web browser upon sending.  It looks great in the Web browser, of course, but not in the Outlook inbox.


 

laurieb

Newbie
Total Posts:  9
Posted: 04 November 2016 08:32 AM
[ # 13 ]

Hi, Geoff.  So, in an attempt to replicate either the issue or a correct rendering,  I went ahead and had the same email sent from my Linux server to both the test account I’ve been using AND to my Gmail account.  This one that runs through Gmail looks fine.  It appears that, when I send the email through one email service provider, it does not render properly in Outlook 2013, but when I send it through another, it looks fine in Outlook 2013.  I checked the source code off of each, and it does not differ.

I’m pretty new to the world of writing html/css for email, so this was a surprise to me. 

Geoff, is this a common issue and is there anything that can be done to prevent such inconsistencies?

BTW, the test account I’m using runs through an MS Exchange Server.


 

Geoff Phillips

Avatar
Moderator
Total Posts:  386
Posted: 04 November 2016 08:44 AM
[ # 14 ]

laurieb,
This is a very common issue. What this means is that one of the two is modifying your code in such a way that it breaks the display of the email. The only way to deal with this is to change how it’s sent, either by modifying the sending service or by choosing a new one. I hope that helps answer your question!


 

laurieb

Newbie
Total Posts:  9
Posted: 04 November 2016 08:51 AM
[ # 15 ]

Hi Geoff, yes it does answer my question.  Thank you very much for all of your help in this.  It is very much appreciated!