Outlook 2010 v14.0.7177.5000 width issue

[mtjepson]

In Outlook 2010 v14.0.7177.5000 on installed on 32 bit PC's there seems to be a width issue. Outlook ignores the set px based width which allows all nested tables set to 100% to expand to fit the Outlook viewing window.

How to reproduce this bug:

Open a template in Outlook 2010 v14.0.7177.5000

What should happen:

Contents within tables set at 100% should only expand to fit the container width.

What happened instead:

Contents ignore container width and expand to full width of Outlook viewing window.

Test case:

I can not replicate the issue in Litmus. It's client side. However it seems that that Outlook is ignoring the CSS width: declaration set on the container. I've included full code below.

client-template.html.zip

[rafibomb]

Hi - We haven't seen this issue in any of our templates on real devices so we'd like to see if the markup is causing it.

Are you using the Sass version or Inky? If so, can you share the Inky markup for this template? If not, can you share an un-inlined version so it's easier to debug?

[mtjepson]

Hi Rafi,

We're using Sass. I've managed to determine the exact issue and it does seem to be a Foundation for Emails template bug. It effects installations of Outlook 2010 v14 on new PCs that have DPI scaling set at 125%. It seems nested tables that have no set width and that are set to 100% break the framework in this setup. Regardless of whether the container tables have width="x" applied. Setting the PC back to 100% and the template displays perfectly.

To determine whether the issue was in my code or in the framework I installed a shell template 'out the box' and tested it. The template broke.

I'll send through my Saas file and the distilled file for you to take a look at.

Thanks,

M

[mtjepson]

Just to add, the template displays perfectly in all Litmus tests. That said, having been in touch with Litmus they do not cater for this setup. They only run Outlook 2013 with DPI scaling and it seems to display perfectly in that configuration.

[mtjepson]

Hi Rafi,

I've posted a comment on Github. I'm attaching the files to this email as the templates are highly confidential. There is a Saas file and I've also attached the distilled version that has had some additions to try to rectify the issue. Please do not circulate these on Github or any other forums. Please delete once you've taken a look.

A solution to the issue explained would be appreciated.

Kind regards,

Miles ᐧ

On 29 March 2017 at 18:52, Rafi [email protected] wrote:

Hi - We haven't seen this issue in any of our templates on real devices so we'd like to see if the markup is causing it.

Are you using the Sass version or Inky? If so, can you share the Inky markup for this template? If not, can you share an un-inlined version so it's easier to debug?

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/zurb/foundation-emails/issues/732#issuecomment-290169748, or mute the thread https://github.com/notifications/unsubscribe-auth/AZPGmpycoJ_avaMrI2gnatrBYwqYaf-Iks5rqppfgaJpZM4MfhrT .

--

Miles Jepson Creative Director t: 020 7096 5076 w: pendulumcreative.uk

Pendulum Design is a company registered in England and Wales. Company no. 09564285 VAT no. GB213680036. Office: V123 Vox Studios, 1-45 Durham Street, Vauxhall, London SE11 5JH. Pendulum Creative is a trading name of Pendulum Design Ltd.

[JulesWebb]

I'm having the same or similar issue in Outlook 2010 v14.0.7180.5002

Screenshot:

It looks to me like the issue is related to image sizes, at least in my situation.

For 2 and 3 column rows I was hoping to use images that were larger than the column width so that on smaller devices they would present in the screen full width as opposed to centered but only 166px or 260px wide---the original col width.

I really thought that adding the conditional below to the default.html layout targeting Outlook would work, but it didn't.

<!--[if (gte mso 9)|(IE)]>
<style>
  img.w540 { width: 540px !important; } 
  img.w260 { width: 260px !important; } 
  img.w166 { width: 166px !important; } 
</style>
<![endif]-->

What worked was adding the the column width to the image tag. I didn't do this from the beginning because as I noted above, I thought that it would limit the image to that small size when the layout collapsed down on smaller devices, but it didn't.

1 Col Row <img src="#" width="540" height="" alt="my description text">

2 Col Row <img src="#" width="260" height="260" alt="my description text">

3 Col Row <img src="#" width="166" height="166" alt="my description text">

Not sure if this is the the problem @mtjepson is having, but hopefully it will help save time for someone out there.

Cheers! jules

[illycz]

@mtjepson I think, you are author of this forum post: https://foundation.zurb.com/forum/posts/51538-outlook-2010-v14-width-issue. You say: "This seems to work... Annoyingly I can't paste it in here." Can you share your solution?

Thanks

[mtjepson]

Hi Patrick,

I can't paste code into the post unfortunately... I can send it via return of email if this helps?

Miles

On 2 August 2018 at 10:24, Patrik Illy [email protected] wrote:

@mtjepson https://github.com/mtjepson I think, you are author of this forum post: https://foundation.zurb.com/forum/posts/51538-outlook- 2010-v14-width-issue. You say: "This seems to work... Annoyingly I can't paste it in here." Can you share your solution?

Thanks

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/zurb/foundation-emails/issues/732#issuecomment-409864190, or mute the thread https://github.com/notifications/unsubscribe-auth/AZPGmpP-DOnMupaFyW06qsPs4e4thBQuks5uMsVcgaJpZM4MfhrT .

--

Miles Jepson Creative Director t: 020 7096 5076 w: pendulumcreative.uk

Pendulum Design is a company registered in England and Wales. Company no. 09564285 VAT no. GB213680036. Office: Bedford House, 69-79 Fulham High Street, Putney, London SW6 3JW. Pendulum Creative is a trading name of Pendulum Design Ltd.

[illycz]

Yes, my email: [email protected]

Thanks