CR
4
Outlook 365 images issue after recent Win10 update
I would like to share with you a strange Outlook 365 desktop behaviour which made its mark after a Windows 10 update this October.
It seems that in Outlook 365, images in a html table cell are pushed 1 pixel to the right and 1 pixel down as well. Strange thing is: when the screen format is changed, this changes the rendering as well. The email is fully coded according to the recommendations for use with Outlook desktop clients.
The below table contains a top image and a bottom image. The thin background color orange lines show the space where the image is 1 pixel "displaced" so to speak.
I would be curious to know if any of you have encountered this phenomenon as well.
Charles
I have been struggling with this issue as well. The only thing I have found to fix it is adding an align="left" or align="right" to the image tag. We noticed this primarily in our logo at the top left corner of an email.
So by using:
<img src="logo.png" alt="Logo" width="271" height="72" style="display: block;" align="left">we turned this:
into this:
Thank you, Erica!
I'm finding this works about 90% of the time, but there are still some images where it's being shifted/cut-off even with the align attribute. It seems like images within a short height cell (along with the shorter image) are still being affected, but I can't say it's the height still causing it with absolute certainty.
The other issue is with VML images not being cut off but still being shifted the 1px. While the absolute/relative positioning can be adjusted, it'd only appear correct for affected builds.
On a separate note, Version 2211 (Build 15831.20190 Click-to-Run) has been released and the problem is still present.
On the VML image side (<v:image>), I was able to counter the shift using style="mso-position-horizontal:outside;margin-top:-0.75px" without negatively affecting older builds, but it's not thoroughly tested yet.
Hello Erica,
Thank you for your contribution.
However, it does not appear to solve the image displacement case.
To be honest, I also can't seem to see a difference between the 'before' and 'after' renderings in your image example.
Charles - the top image shows that 1px is being cut off on the right and bottom of the image. In a scenario like that using
align=""on your img tag will eliminate that problem most of the time.Erica - the
<img align="">fix doesn't work for me in Windows 11 Outlook 365 Desktop, version 2211 (Build 15831.20208). Still cuts off the right and bottom by 1px.Erica - correction (sorry!). The align fix you mentioned does work in initial tests. Thanks!
Hi Charles, Did you fixed it? I met the same issue.
Negative :-)
This bug affects Version 2210 (Build 15726.20202). Only thing to do right now is provide feedback to Microsoft through Outlook and any other social media means. Their own Microsoft Store emails are breaking as well, so you'd think they'd want to get this fixed sooner than later.
VML images don't get the cut off, however, they're shifted 1px right and 1px down. Repositioning them isn't a fix either since it'd cause a 1px display issue in previous Outlook builds.
Hey folks! This appears to now be resolved in the latest build - Version 2212 (Build 15928.20216 Click-to-Run)
Brian, that's great.
Unfortunately, the fix does not seem to be present in update 2022-12 (KB5021233) for Windows 10, which means that I still have the problem.
Thanks for the info!
Can confirm, it's resolved in Version 2212 (Build 156928.20216 Click-to-Run) for Windows 11 Office 365. I have automatic updates on, but I still had to force an update to get the latest build. So that's great for me, but Clients and Users might not have the fix yet, so we'll still employ the fix for a period of time.
Hey Charles,
I personally haven't noticed this issue, although I tend to code most elements in HTML so it could simply be that I have not been exposed due to my current build methods.
Are you able to supply some code for us to reproduce & debug with you?
Feel free to provide an example with dummy content if anything is confidential.
Sure, this is the code:
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="border: 10px solid #000000;">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<img alt="" src="https://dbasesite.mistermail.nl/scripts/klanten/testlijst_cr/sampleimage.jpg" width="200" height="200" style="display: block;">
</td>
</tr>
</table>
</td>
</tr>
</table>
In a browser, it looks like this:
In my Outlook 365, it looks like this:
showing a thin white line between the border and the left and upper side of the image.
Hi Charles. I'm having the same problems. Noticed it first in our CTA buttons with images on either sides (rounded corners). Also saw this in vml background images.
Haven't found a fix for it yet :(. Outlook makes me sad.
Hello all
Has anyone found a fix?
Hey Charles - seeing the same thing here across all clients. Apparently it's with the new build of Outlook: Version 2210 (Build 15726.20202). Have tried many different ways to try and fix/override it, but so far no luck. Hopefully they provide a bug fix ASAP.
FINALLY!! Someone is talking about this.
Noticed this problem a while ago. Posted this (below) over at Stack, and nothing - crickets!
https://stackoverflow.com/questions/74460961/html-email-outlook-adding-1px-padding-left-and-top-of-images-png-background
Hate Outlook so much!
Maybe someone already has a possible solution? At this point I've tried just about everything.
Thanks!
For me the align="left" solution fixed the problem but for some reason added a weird white background on the PNG image so I had to remove that and found that simply adding 2px of padding to the right and bottom of the <td> fixed the issue for me. Thank you everyone for your answers and help!
I have encountered the background issue with a PNG once as well. I found that adding an empty element just before your image will eliminate that problem. So adding
<tr><td style="font-size:0;line-height:0;">
</td>
</tr>
just before the table row containing your image. I did try to add padding right and bottom like you mentioned but unfortunately that did not work for me.