HTML newsletter coding - outlook line-height issue
Hello. Anyone able to help with some styling issues in outlook newsletter styling? Particulary line-height in outlook
21 Replies
make it work without the line-height
emails and css is like oil and water
.. the issue is that outlook always uses at least on paragraph line height
and that is like 130%
of font size - that adds a lot of spacing and looks really bad
I found hundred of mentions of Mso-line-height but it doesn't work for me
depending on what you use, you might be rendering the emails using the msword engine, which sucks
if you are having so much trouble, sounds like you are using divs
I am using tables for email structure. I tried adding the overwrite to divs, spans, p, font, everything. In the end i made changes to the design, as this is not something that can be changed. At least for outlook 2019. It will completely ignore the mso-line-height rule and use the "at-most" setting on paragraph line height
you are expecting too much from a piece of junk that runs the html through a modified version of ms word
With the amount of marketing emails sent you'd think there would be a better solution for html emails by now. Last time I was working on one, flex still didn't even work for everyone. It's such a mess. Who would be in charge of integrating css properties to work with html emails? I want to plea with them 🤣
actually, there is
there is a react project that renders the emails for you
how compatible is it? good question
when making emails, you have to assume it is still using html 4.01
and no css at all
last time i worked on one, i spent hours cursing at the windows mail app
the first table would have a white space for absolutely no reason at all what-so-ever
FWIW if you want to get out of tables in emails, MJML is a really good resource and has strong compatibility with all email clients including Outlook https://mjml.io/
MJML - The Responsive Email Framework
The only framework that makes responsive email easy. MJML is a markup language designed to reduce the pain of coding a responsive email.
nope, i was wrong. this looks cool
when I worked in Salesforce Pardot, an email template was 3 tables deep just to get to the table that would hold the email😬, this made things so much easier - but it was much harder to use back in the day. MJML is so well fine tuned these days.
3 tables deep?
yeah like they had wrappers on wrappers on wrappers
same especially when some of those templates have tons of nested tables lol
i'd rather work with a dreamweaver template than an email template any day without something like MJML
i have to try this
i still write everything with tables, and it sucks
their live editor is nice too - and it will minify what you write which is a timesaver in the end
that sounds dangerous
Andrew, can you just copy the html from the online editor and use that as the body for your mail from Python, PHP, whatever?
The HTML on the right side, of course. Not the mj-tags
yeah pretty much https://mjml.io/getting-started/1
here's the docs for it for local install etc. https://documentation.mjml.io/#installation
Thanks!