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 (120 dpi) font scaling breaking table cells height

waterrf

Newbie
Total Posts:  9
Posted: 13 December 2016 05:31 PM

I have a header combination of editable text and images. I’ve gotten it to work adequately in most email clients besides the 120 dpi versions of Outlook—according to an Email on Acid test:
https://www.emailonacid.com/app/acidtest/display/result/FbHfqj3PDxw5p6MNRfNmode8CrCQQzdOVeqDxDmSv9hQd/66

The words “Water Current” get enlarged and wrap, breaking the cell height.
I’ve been playing with different options off and on for a few days. I added the pixel widths to the table cells in a style. I added -mso-padding-alt: 0px 0px 0px 0px; to all of my td tags. I’ve added mso-cellspacing: 0; to the tables containing the header…

I adjusted the width of the cell containing the words to 270px and deleted the image to the right and it works beautifully. I created a new image at the remaining size, put it back in and the words wrap again. Just to see if it would work, I’ve changed the cell widths to 280px and 155px, adjusted the width of the image to 155px and the words still wrap, but there’s clearly a gap to the right of the image.

My ESP won’t allow me to edit the HTML tag to add VML support, although my images don’t appear to be getting enlarged (I don’t have a way to test either client outside of Email on Acid). 

I’m attaching my code in case someone can see anything wrong. Please note, there is a LOT of complexity in the attached code related to other parts of the email (my ESP has me update sections independent of one another, so they’re not all on the main code template).

I’d like to give up and just know it’s broken there, but the likelihood of my readers using font scaling is fairly high. I was also curious: if there’s a way to target retina pixel devices with media queries, can we target the reverse?

Thanks!  Cheri

File Attachments
WaterCurrent2017_120dpiFix.html  (File Size: 7KB - Downloads: 215)

 

Alex Ilhan

Avatar
Administrator
Total Posts:  224
Posted: 20 December 2016 05:24 AM
[ # 1 ]

Hi Cheri,

DPI scaling is the bane of many a developer! This fantastic blog from James White should help you: https://blog.jmwhite.co.uk/2014/03/28/solving-dpi-scaling-issues-with-html-email-in-outlook/

Let me know how you get on!

Cheers,
Alex.


 

waterrf

Newbie
Total Posts:  9
Posted: 20 December 2016 09:19 AM
[ # 2 ]

Hi Alex,
Yeah, I’ve referred to that blog post multiple times, but nothing there seemed relevant to my issue. EXCEPT maybe the image scaling issue, but I don’t have access to edit the HTML tags with my vendor. At least I was able to do some plain old regular responsive/mobile design to break up the email coding frustration. smile I have decided that I’m going to let that one go.