email-bugs icon indicating copy to clipboard operation
email-bugs copied to clipboard

Outlook 365 (Windows) 2025 ignoring CSS and breaking hybrid email layouts

Open fivedoor opened this issue 5 months ago • 3 comments

Email Client Outlook | Office365 | desktop app | latest version 2505 Client: Outlook Desktop New 365 Outlook Version: 1.2025.716.500

Operating System Windows 11 Pro

Expected Result Outlook renders hybrid email columns correctly (rendering expectations similar to gmail) CSS in style block is read not stripped or ignored. Background images are supported

Actual Result Emails are rendering as if style block CSS is being ignored Background images defined in style block are not rendered Hybrid columns (in divs) are stacked not parallel (this should work even if style block CSS is stripped)

Steps to reproduce Code example provided below to reproduce

Code sample Example code to reproduce hybrid columns break can be found here:  https://github.com/fivedoor/codekitchen/blob/master/2025/tests/ol365-example1.html

Screenshots Litmus Tests render fine: Image

Live test to Outlook 365 2025: Image

Additional context

  • Seems like this may be due to a recent change at time of writing. Emails that were rendering fine a few weeks or so ago are now breaking when retested. The old tests still look fine in the inbox.

  • Occasionally when testing I noticed an email with look correct for a split second and then revert to the broken rendering state.

  • The only other report of this I’ve seen that sounded very similar was on the email geeks slack (21st July 2025) which suggested this may be isolated to @corporatedomains and not occur when using @outlook.com addresses https://emailgeeks.slack.com/archives/C1Z733K1P/p1753114148962669

  • In the example shared I was able to fix the rendering i.e. get the columns to render side by side by replacing width:84px in the img tags with max-width: 84px !important. However, that solution was not resolving similar issues in other email examples I tested.

  • Outlook has produced different rendering results from the same code when retested which is making it hard to extrapolate anything useful. So the above fix both worked and did not work when tested (worked for the example provided as of last test). I downloaded the tests as an .eml file and compared source code to double check the html was a match. (I had to do this because the new Outlook no longer seems to have an option to just 'view source'). The rendering of each test on first view is preserved so I have two different rendering results I can view in the inbox for the same code.

  • Based on the extracted .eml files the html and all the style block css is in tact - just being ignored it seems

fivedoor avatar Aug 05 '25 16:08 fivedoor

Adding some additional context:

Seems like the issue is connected to the 'reading pain' layout which can be switched in the View tab.

  • If I switch to ‘pop up’ or ‘fill screen’ reading pane style the emails render fine.
  • With ‘Show on right’ or ‘Show on the bottom’ options selected the emails break no matter how wide the display pane is.

I’d assume most people use the default ‘Show on right’ (as I do) which prior to a few months ago seemed to render emails as expected

fivedoor avatar Sep 09 '25 16:09 fivedoor

@fivedoor I'm not seeing the issue on Classic (2507) or on New Outlook (1.2025.801.400) both on Win11.

There is a high likelihood this is being caused by a layer of security software that is processing your emails. This banner indicates this is happening:

Image

These software layers intercept the email before it's delivered to your mailbox and change the HTML and CSS, add the banner, then delivers it to your mailbox.

I'd recommend viewing the message source as received by Outlook to check what has actually been delivered to you.

New Outlook: Click the three dots top-right above the message (next to Reply/Forward), go View » View Message Source.

Classic Outlook: In some versions, you can open the message in a new window, then find the Actions » Other Actions » View Source like this:

Image

On newer Classic Outlook that is gone, I had to add the "View Source" command to the Quick Access toolbar. Just choose from "All Commands" and add "View Source". Then click it from that toolbar to get the source.

nicolemerlin avatar Sep 09 '25 22:09 nicolemerlin

@nicolemerlin thankyou for picking up on this. It's much appreciated.

RE Email Source

When I have extracted the message source and reviewed the code the html and CSS style block always seemed be in tact I.e. nothing obviously stripped or added other than the ‘Caution banner’ which, based on the code added (being a table of undefined width at the top of email body), I wouldn't normally expect to cause the rendering issues experienced encountered.

I don’t seem to have the ‘View message Source’ option in the new Outlook I’m running (as in screenshot). But I have extracted by saving the email as .eml and reviewing the source via that.

Image

Noting the email renders fine on my version of Outlook Classic (all be it with the usual hacks and fixes)

Security layer Would it be wrong to assume if the culprit was security software processing the emails, I would expect to see some evidence of that in the email source e.g. the style block stripped.

Meantime I will pick up with our OPS team to check if there were any changes to internal security software that might overlap the issue.

thanks!

fivedoor avatar Sep 10 '25 11:09 fivedoor