CODEWITHSUNDEEP
htmlcssemailoutlookhtml-email
DreamTeK
DreamTeK

Reputation: 34177

Using additional css classes in email markup

In outlook htm email additional classes are ignored.

In this example when I render and email the following html. The resulting markup is as below.

The final statement does not align right. Class2 RgtTx

.RgtTx {
  text-align: right !important;
}

<td class="RgtTx"></td>
<td class="RgtTx Class2"></td>
<td class="Class2 RgtTx"></td>

I am unsure but expect this isn't isolated to Outlook.

Is there a workaroud or fix for this using css without changing the html?

This is not a duplicate qustion

Upvotes: 1

Views: 9124

Answers (2)

gwally
gwally

Reputation: 3527

Outlook ignores tags with !important.

Outlook ignores @media queries. So one thing you can do is place values in a query to influence other email clients.

You can also create an Outlook-specific style sheet to influence Outlook 2007-2016 Desktop without interfering with modern email clients:

<!--[if (gte mso 9)|(IE)]>
<style type="text/css">
  body {font-family: Arial, sans-serif !important; font-size: 14px;}
</style>
<![endif]-->

This article covers other shortcomings with Outlook:

Since you're unwilling to use in-line styles, you're going to be limited to how much you can influence Outlook. As an example, if you're resizing images, Outlook will ignore in-head style values for size and display the image in it's actual size.

Good luck.

Upvotes: 1

samyok nepal
samyok nepal

Reputation: 557

Usually, email requires inline styles--otherwise it will work sparingly (check here for support among clients). Try using a CSS inliner like https://inliner.cm/. It takes this: 

<style>
  .RgtTx {
  text-align: right !important;
}
</style>
<td class="RgtTx"></td>
<td class="RgtTx Class2"></td>
<td class="Class2 RgtTx"></td>

and turns it into:

<style>
  .RgtTx {
  text-align: right !important;
}
</style>
<td class="RgtTx" style="text-align:right !important;" ></td>
<td class="RgtTx Class2" style="text-align:right !important;" ></td>
<td class="Class2 RgtTx" style="text-align:right !important;" ></td>

which should work.

Upvotes: 3

Related Questions