CODEWITHSUNDEEP
htmlcssoutlookhtml-email
rifa_at_so
rifa_at_so

Reputation: 326

HTML Email style not working in Outlook

I have a css property inserted inline to an HTML Email text-transform:lowercase to a span element. when I send the email it's shows the fonts are in lowercase except outlook. Seems the font styles are not applied in outlook. What is the correct way to insert the style inline which works for outlook as well?

<a><span style="text-transform:lowercase;letter-spacing:4px;">shop now</span></a>

Outlook

enter image description here

Other Email Clients

enter image description here

Upvotes: 0

Views: 18106

Answers (3)

Steve
Steve

Reputation: 21

Since Outlook 2007 Outlook has used Word for its HTML formatting which means that Outlook doesn't allow all standard CSS. One example is text-transform. Someone else posted a link to CampaignMonitor.com which states that text-transform is supported by Outlook, but that is not the case. You can see for yourself on Microsoft's website under the section "Unsupported Cascading Style Sheet Properties Compared with Cascading Style Sheets, Level 1": https://msdn.microsoft.com/en-us/library/aa338201.aspx

Upvotes: 2

Ted Goas
Ted Goas

Reputation: 7587

Generally Outlook supports text-transform as long as you put it in the right tag. That empty <a> tag could be throwing off outlook.

Try changing your code to this:

<a href="#"><span style="text-transform:lowercase;letter-spacing:4px;">shop now</span></a>

You can also place the inline styles right in the <a> tag and lose the <span> all together:

<a href="#" style="text-transform:lowercase;letter-spacing:4px;">shop now</a>

Upvotes: 1

Angel ofDemons
Angel ofDemons

Reputation: 1267

You could try to change the value to lowercase before putting it in the email perhaps like this:

   var MyDiv1 = document.getElementById('text');
   var MyDiv2 = document.getElementById('second');

    var res = MyDiv1.innerHTML.toLowerCase();

   MyDiv2.innerHTML = 'changed ' + MyDiv1.innerHTML + ' to ' + res;
       MyDiv1.innerHTML = 'Now you can use the variable `res` as a variable in the email';
<span id="text">SHOP NOW</span>
<br />
<span id="second"></span>

Upvotes: 0

Related Questions