outlook.com doesn't center the body
naczu opened this issue · 9 comments
Hi. these email temps are very useful. But outlook.com doesn't center billing.html body
no it is not about outlook 2007. it is about outlook.com. first outlook.com doesn't center the body of the page. I think issue is about css ecxcontainer class. And "alert alert-warning" class doesn't work. There are problems for outlook.com
If you change the margin on the container <td> to Margin, with a capital "M", that will fix the centering issue i.e. Margin: 0 auto;
I'll update the repo shortly.
@naczu I wasn't able to reproduce the alert banner issue. Not with Litmus any way. Mind sharing the exact HTML you're sending?
Yes it centered the container when I changed "margin" to "Margin" in container class. Thank you. But still alert panel doesn't work on outlook.com. I use default email alert http://mailgun.github.io/transactional-email-templates/alert.html. I think outlook made something new for filtering css scripts. When I made alert alert-warning inline, it works fine.
style="font-size: 16px;color: #fff;font-weight: 500;padding: 20px;text-align: center;border-radius: 3px 3px 0 0;background: #68b90f;"
I don't know what is wrong.
Ah yes you need to inline the styles before sending it out.
Mentioned here but sorry if I didn't make it clear.
As Lee said, to center the main container <td>, the "M" in its CSS property name Margin has to be capitalized.
I tested all three templates in Outlook.com, and in addition to the <td class="container"> shared by all of them, there are 3 other HTML elements in 'billing.html' (a <h1> heading, a <h2> heading, <table class="invoice">) which need Margin for improved display. Comparisons below.
As this "hack" is ridiculously simple, it's also super easy to overlook – and rather inconvenient to deal with in regards to inlined CSS we need in final emails. Namely, CSS inliners will uncapitalize margin, so writing Margin in 'styles.css' is mere documenting, and to actually apply it, it has to be capitalized by hand in final emails (the HTML code with inlined CSS).
With that said, as it's a useful addition IMHO, I will open a PR with this fix documented for 3 CSS rules in 'styles.css', and applied to corresponding HTML elements in 'inlined/action.html', 'inlined/alert.html', 'inlined/billing.html'.
Is this an issue anymore since Outlook.com has been replaced by Outlook365 (which doesn't suffer from this bug)?
Thanks @TedGoas. While at the moment my Outlook.com hasn't been upgraded yet, Microsoft writes that everyone should get the new version soon (“we’re rolling out these upgrades to Outlook.com users as quickly as possible, with millions of accounts being upgraded each week”).
It's great news if we can start to forget about many rendering quirks of Outlook.com, including this issue. And while I personally would like to re-test this after getting access to Office 365-based Outlook.com, I'm sure repo's owners would be happy to close this issue (along with #21) sometime soon.