search

mailgun / transactional-email-templates

Responsive transactional HTML email templates
http://blog.mailgun.com/transactional-html-email-templates/
MIT License
6.91k stars 1.15k forks source link

outlook.com doesn't center the body #18

Closed naczu closed 7 years ago

naczu commented 9 years ago

Hi. these email temps are very useful. But outlook.com doesn't center billing.html body

acorncom commented 9 years ago

See Issue #11 ?

naczu commented 9 years ago

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

screenshot
leemunroe commented 9 years ago

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.

leemunroe commented 9 years ago

@naczu I wasn't able to reproduce the alert banner issue. Not with Litmus any way. Mind sharing the exact HTML you're sending?

image

naczu commented 9 years ago

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.

ekran resmi 2015-09-10 19 16 48
leemunroe commented 9 years ago

Ah yes you need to inline the styles before sending it out.

Mentioned here but sorry if I didn't make it clear.

lembitk commented 8 years ago

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'.

TedGoas commented 8 years ago

Is this an issue anymore since Outlook.com has been replaced by Outlook365 (which doesn't suffer from this bug)?

lembitk commented 8 years ago

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.