Foundation-emails: Image sizes in Outlook 2003

[parkersweb]

I've got a simple hero image in a template I've just created:

    <table class="body">
        <tr>
            <td class="center" align="center" valign="top">
        <center>


          <table class="container">
            <tr>
              <td>

                <table class="row">
                  <tr>
                    <td class="wrapper last">

                      <table class="twelve columns">
                        <tr>
                          <td>

                        <img width="580" height="300" src="http://placehold.it/580x300">

                          </td>
                          <td class="expander"></td>
                        </tr>
                      </table>

                    </td>
                  </tr>
                </table>
              </td>
            </tr>
          </table> 

        </center>
            </td>
        </tr>
    </table>

It's been through the zurb inliner and is using ink 1.0.4 - but for Outlook 2003 (and Outlook 2002, 2000) the image width is wrong:

http://cl.ly/image/3T1A0x020v07/o

I can't see anything else to reduce the problem further - is there something I'm missing?

Thanks!

Andrew

[thedeerchild]

Try removing the td.expander, just for the row with the hero image. It's a strange quirk (one that we haven't found a good way to describe as a caveat in the docs), but sometimes putting an expander on a row with only an image will cause the image to render at half width (only in the old versions of Outlook).

[parkersweb]

Thanks Eric - I'll give that a try!

[thedeerchild]

Did this fix the issue? An alternate approach you may wish to explore is adding a   character inside the <td>, immediately before the image.

I'm going to close down the issue because it appears to be fixed, but feel free to re-open it if you're still having problems.

[parkersweb]

It didn't fix the issue - I'll try adding an   inside the <td> and see if that helps - thanks!

[thedeerchild]

Uh oh, that's not good. If you send me the full code at [email protected] I can take a look and play around with it a bit.

[Brainiacs]

2014-01-09, Eric Morris [email protected]:

Did this fix the issue? An alternate approach you may wish to explore is
adding a   character inside the <td>, immediately before the
image.

I'm going to close down the issue because it appears to be fixed, but feel
free to re-open it if you're still having problems.

---

Reply to this email directly or view it on GitHub:
https://github.com/zurb/ink/issues/50#issuecomment-31961841

[maxisix]

Did you guys find any way to correct this ? I have the same problem.

[parkersweb]

I don't remember whether we fully solved it - the client wasn't worried about supporting older versions of Outlook. Eric kindly took a look at the code and suggested it might be a problem with the ESP stripping or modifying the doctype. It's also worth using the zurb inliner if you're not already.

[maxisix]

I always used the zurb inliner and it always did the same problem. My client isn't worried too but I just wanted to know if you guys found any way to correct this bug ! :) thx !

[crispconcepts]

Thought it worth noting that this did, in my case, solve a problem I've been troubleshooting for two days. I was having an issue with the 580 pixel wide header image not fitting in the 580 pixel wide table in Outlook 2003, Windows Mail and Live Mail desktop software on email on acid. Removing the EXPANDER td solved the problem.

Note: with the ink inliner, this wasn't an issue. But, because of the way our email deployments work, they get generated with dynamic contents as they go out using a JSOUP parser. The engineers set this all up and I have no control over the process. So I needed a solution that played nicely with the existing architecture or else I had to start over from scratch after investing a lot of time switching things over to ink template.

[soulglider]

I had a similar issue with a full-width footer image and removing the 'td expander' for that edge case fixed the older versions of outlook.

[maxisix]

Yea it fixed the image but the td expander is used for the responsiveness of the newsletter ! ;P

[soulglider]

In our case the email passed all Litmus tests for web/mobile clients except for 'Windows 8 Phone' following that modification. Happy with that :)

[lenymo]

I can confirm that this fix still works. I had to use it when there were multiple images in a row as shown below. They still work responsively as expected as well.

[rafibomb]

This is a great reference! It worked for me too, although really bizarre!

[rafibomb]

FYI - if you are using Foundation form Emails 2 with Inky - this can still happen but you can add a no-expander attribute to the column.

<columns large="12" no-expander>